|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习
4 U% E8 w8 v: y+ |. P( N
& f6 i7 b0 c: a, h8 O5 F
1 C2 ?( K1 [ }6 D( q7 Z% ]$ G# M/ c G
<template>
+ |, I) w3 u0 l: \2 b% v) i <div id="app">& A4 Q+ z0 b: s4 `. F. t! p3 c
<!-- nav -->5 b2 }4 r- R! C+ V8 s
<el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
5 `- n1 _5 Z* F9 B$ n' F# L0 d: _ background-color="#545c64"
1 l/ {, V _* K3 p& v S# ~ text-color="#fff"( B$ L; ^- T4 Y8 d6 W6 |
active-text-color="#ffd04b"
% u1 K. r5 K" T, D* C menu-trigger="hover">( s7 S% B+ B; d4 [7 j9 v0 A
<el-menu-item index="1">Data View</el-menu-item>) \9 y) J i3 u9 k7 q+ j/ v5 u. A; N
<el-submenu index="2">
) {& }5 P2 {; p+ B2 h9 Y3 A <template slot="title">Data XX</template>. M9 o! f; N5 Q! ^' c) B/ V
<ElMenuItem index="2-1">TC Data Collection</ElMenuItem>8 l- Z9 @" q- \2 x* n* U" S
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
. ^! o$ r' g7 ^' j* _ <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
) A3 x) Y& K! h: m" }" f: S( l4 i/ F <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>5 ~8 J, T0 M; \1 x1 m+ h7 z; c+ o
</el-submenu> {# s& Y& x0 F' ?' G
<el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>$ k3 A6 z4 F8 {) L3 [5 K7 R
</el-menu>$ ~7 S/ _0 P# R! J
( x j5 Y* L2 [1 \8 k' ^
; }5 f. _6 U' }2 G; u, i( U/ Z <!-- search -->
$ `5 W( Z1 y/ u' r# I <br>; H( B& g" T: `! |7 e9 L: l' L4 D4 Z
<el-row>
; E; V- A3 L* v# s% n <ElCol :span="6" class="grid">
9 r2 O- N5 w; O- x+ [( u& z1 ? <el-input v-model="input" placeholder="please input the value" ></el-input>0 |2 w( \7 N) f; b; E: h4 Y
</ElCol>
1 k# J( d$ a% Z& A( [! x% e+ a( X( S$ l <ElCol :span="2" class="grid">/ v+ P( t% @% a4 o6 s% ]
<el-button type="success" icon="el-icon-search" >Search</el-button>
6 L5 P. s m0 q9 O </ElCol>
! [3 V3 q/ A3 W# M& ^$ S</el-row>9 J2 a/ T+ s: O; S* F% ^; w$ W
<br>% s3 P6 Z& ?9 D' y
3 t) U. u$ {* q$ Q' f( |<!-- table and operations -->& C& b3 t5 I* F- a9 j [0 l
<el-table $ `1 J6 R z4 \8 D6 g; M5 s
:data="tableData"
4 k# |4 j- g2 i1 estyle="width:100%"
3 @3 t. P! e7 l4 A2 E9 M6 D" hstripe7 y0 b5 x. n, f! K' G
>& z/ z5 d* Y; g
<el-table-column fixed label="Date" prop="date"></el-table-column>0 W: H! e5 s ^4 Z: [% E7 s
<el-table-column label="Name" prop="name"></el-table-column>
; U1 K3 r6 q! W1 O1 ? N<el-table-column label="Address" prop="address"></el-table-column>
, z/ m# v) T0 h0 g! ?% b<el-table-column align="right">
3 D( p" H5 ? Q; _; f<template slot="header">
1 B+ E. U4 x7 z0 U <el-input v-model="search" placeholder="please input the keywords"></el-input>
d8 I4 c* h6 k \% O' o" Z% j' d</template>/ V, J4 `; @3 n+ _! d
</el-table-column>
- F0 r5 u% v2 x2 H: @
* M$ K l' K. j" c' P<el-table-column>5 g. ]# T, z. m
<template >
% K% H, D1 L& x& J <el-button type="primary" icon="el-icon-edit">Edit</el-button>
7 v# s n" X7 A" _4 J/ S& O* ? <el-button type="danger" icon="el-icon-delete">Delete</el-button>
7 q! D6 O5 n& M P8 D, [</template>) a" J" R! S; m/ N2 R5 T
</el-table-column>
2 O% W3 ~ P7 w2 w+ Q7 p8 O</el-table>' p/ H( S x& t
8 X) C( |4 j: q% P, E<br>% `; T$ f# V4 P9 w
<!-- Add new buttons --> y3 |* E1 i. W8 _+ W r
<el-row>
. P8 _' V5 n! J1 h) V# Q" b2 o <ElCol :span="1" class="grid">0 x; b* ~+ m$ C4 X: b( B
<el-tooltip effect="dark" content="Add new information" placement="top-start">
8 d" |8 j. [- s( e! p8 { <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>2 l$ H3 N+ ?; x* I4 T
</el-tooltip>% Q+ E* t7 V0 g) N
</ElCol> j1 y) r% h# h
a; }2 a* w2 s) K& t+ `
<ElCol :span="1" :offset="1" class="grid">
; g! C9 w2 X- z <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
+ A7 n% ~: T+ p8 k! C5 h0 B <el-button type="danger" icon="el-icon-delete">Delete All</el-button>4 _9 U9 n% H* i0 Y, y
</el-tooltip>
& I$ ~0 I6 l# P1 D' W9 i" O </ElCol>3 Z3 Z8 V/ s' Z- @1 N- J# c4 }
, S4 O5 t6 c V# D" I</el-row>5 J; e# Q$ l. s3 H
/ e1 j- Y) p. u! r" \" T: b
<!-- Page split -->
G' i- {' H. v- r) ?<br>" ~; @( y% V- P
- z' Q& L' [! b4 M5 ~
<el-pagination background
- _. H. y; M# K; r :total="1000". H U1 k& _1 Y! Y$ H: v; _/ }8 z
layout="prev,pager,next">3 @2 o2 X( k1 h( w2 ~. I7 @0 T
</el-pagination>$ b0 x: u# g# s6 \9 u! u4 Q
) }3 ]+ [# {+ v1 O! c e0 V, |' s' h$ S1 V9 j
, Z9 o2 m ?/ J9 m1 K
</div>/ o, s4 t4 j8 D7 R0 n' F5 n
</template>4 n; u& o/ `4 T* O; |
# A, m. ?8 h5 K5 o2 g0 s! T
<script>" j7 j/ R+ ~+ M/ C) x
" j1 u" {5 _- w/ ]. l/ X: ^2 Mexport default {
- ?4 a3 m; S5 ^$ W name: 'app',
! e$ ]- d. \* Y: V; ~7 X data(){0 G% M' s( v: p- a8 z8 x
return {
8 I3 A+ W) p- ^6 _/ T, h activeIndex: '2',
5 @- `; D! |- Q# n! h. q url:"http://baidu.com",4 O8 i* N( Z! K! U+ t, t
tableData: [{
, `8 k- ~$ i$ o6 q. a" X/ W4 |# q' X' L date: '2016-05-02',3 j/ l% N5 K& Q& m4 i: m& D
name: '王小虎',
9 |% l3 T- k6 I9 D+ D( w address: '上海市普陀区金沙江路 1518 弄'
) G) O4 ]- o( R5 \7 Z4 d }, {9 C- v9 y3 x7 O$ b$ |) g
date: '2016-05-04',
# S0 ` S/ h0 D- w! R: P name: '王小虎',
$ k& I* N% d l1 D& N c1 @ address: '上海市普陀区金沙江路 1517 弄'" ~( a- L4 b- T0 R# }4 Y
}, {9 j' O" N& A, |& c0 h) [- N% t
date: '2016-05-01',
' P# T- z& h+ ~4 W% Y/ G$ T0 p8 g name: '王小虎',
% n' t( q7 x: ^, N- D8 K address: '上海市普陀区金沙江路 1519 弄'
7 g, U' V, Y% m$ a6 w }, {
9 c8 q2 \; K' _3 B date: '2016-05-03',
, F0 v( n9 E. s* a/ C& g7 a8 ]( [/ I) G name: '王小虎',
) @, ?! Q$ u# d5 A4 G address: '上海市普陀区金沙江路 1516 弄'
+ k/ j7 Y$ R. D8 E, b# J. p- o }]
& {! [( ?! j) y2 K2 }- s" ] }2 S3 E( g" q N' Z# s0 A* Z/ Z2 p+ s
}2 }: F% m" o. W9 F' ?
}
! m$ j }) N5 [% }: r</script>3 z: H7 |8 J C/ k, C7 ~, @
) d9 l4 y D: Y- \<style>
6 ~$ a3 r* Z/ H' R4 G2 e #app {3 j" ]; N1 C8 S: Q
font-family: Helvetica, sans-serif;
m0 G. g4 K. C& n h- W) J( b text-align: center;+ V1 y2 r: A9 Q. `
}
$ ]+ J) g9 ]% E/ F1 @ D9 P</style>. Q( I+ F \4 m
7 [3 q8 p$ J1 c! d
; y( c0 d2 M3 ~) d |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
