|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习- B, A& N7 a1 d1 O0 M# Q
. m- z; E& Q6 H% ?$ ?
( ~/ w8 }3 D: M9 z& a
4 k6 `. a4 m. r! K$ n
<template>
+ h. G6 c6 A+ x1 K7 ?# T+ H <div id="app">' B; a# v8 Q' u2 O; Q
<!-- nav -->/ M2 q: p( q( y2 @3 d) @& ]0 l- h
<el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo" / I; d7 Z+ q6 p& v, f4 Q* j& o! |/ `
background-color="#545c64"5 w( c* a& s. ?7 I1 }+ W
text-color="#fff"5 ?& J* G: c/ h( h: k
active-text-color="#ffd04b"
9 ^- h/ h8 l( t menu-trigger="hover">: Z4 ^- R [2 \/ K4 c( }
<el-menu-item index="1">Data View</el-menu-item>
8 [% t0 q% ?6 D) l# w- k4 {1 ?9 x <el-submenu index="2">
# |8 M; t. L# C" n& {- k2 T4 a <template slot="title">Data XX</template>, B7 f4 d4 K- _. e3 d% z0 n4 D
<ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
: y* T9 e$ [" f& A+ ]' z/ K! H* x* k <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
. K% S' w- j. L# X <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
# a; a& c/ I) m <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
2 q+ W( G1 m" v3 z </el-submenu>
, y( q2 R* _& E <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
5 D) t0 A' q5 J6 @" z; k </el-menu>' ?* D, p7 t' z) t, p
- L% Q" Y P7 u1 l0 P% i- u" ?- ?- Y8 N' n, ~- _& t4 ~
<!-- search -->
3 a S7 W( ]1 |/ @0 d/ K3 g9 ` <br>! @3 {: R* D6 |2 V
<el-row>
1 L4 l6 \! r$ d7 Z3 ], P <ElCol :span="6" class="grid">
5 ?1 x2 d0 t! J1 t. [ <el-input v-model="input" placeholder="please input the value" ></el-input>
; n1 x% L" L8 B7 g1 T </ElCol>
6 N; j4 y" S. q& k* _ <ElCol :span="2" class="grid">
& L. K5 Y* g& J# {3 o4 M$ J, I <el-button type="success" icon="el-icon-search" >Search</el-button>
0 B( k+ q9 E; e3 l </ElCol>) t* d- i& C9 o I2 `; [9 ^; X
</el-row>1 S1 N) ^7 P f0 O
<br>% C5 ~" ^9 g/ O: H& Z5 L
3 E+ n) V1 V) V/ D9 u; Q5 ?2 [, V
<!-- table and operations -->+ s) h. N2 m: v$ }
<el-table 0 V3 I6 M4 W; z) m/ M$ v; [; h
:data="tableData"- O: i6 i9 Y$ M' Y6 p4 ^/ O
style="width:100%"+ l$ p7 v2 @" ]4 O% x
stripe
K; T [ x/ _$ }! }4 P3 a7 F6 }>
/ G" y6 t. D" ?8 l" S( s<el-table-column fixed label="Date" prop="date"></el-table-column>; @+ R: v, d( e) w6 C, l
<el-table-column label="Name" prop="name"></el-table-column>
# ~7 a8 \: H! b<el-table-column label="Address" prop="address"></el-table-column>( ^# j, h% z( q# h. J, Y
<el-table-column align="right">4 u& L( }# R) J9 _: c# [" P
<template slot="header">; ]* g/ M w( B+ G" W5 O& A
<el-input v-model="search" placeholder="please input the keywords"></el-input>0 ]# q @4 P" }
</template>$ \' W- h) n, j& W; Q0 g: |
</el-table-column>
' I7 K1 Q2 M: ?% Q& X; O: a* Q2 y& M
<el-table-column>
* }3 W( e4 v# X5 j4 ]2 l; `<template >
7 x/ G7 U4 t; F( t <el-button type="primary" icon="el-icon-edit">Edit</el-button>
, D" f' u! b+ P' J& L* ^ <el-button type="danger" icon="el-icon-delete">Delete</el-button>
( ]( T" o1 A, e4 A8 ?</template>
. e$ P" ?3 ^/ S</el-table-column>
4 H: R3 I ?0 n</el-table>/ C2 @5 U+ x3 j( D
8 K( \ s+ m$ R0 x. [( Z1 h
<br>
0 z) w$ F A% {* A4 |( _1 q<!-- Add new buttons -->. Y. u2 h) m& y3 d8 F: E
<el-row>
! y3 }/ H1 t N2 k! P0 A, P9 @% R <ElCol :span="1" class="grid"># ^$ ]+ }; M, `3 ^3 W* C
<el-tooltip effect="dark" content="Add new information" placement="top-start">. B v) @/ b7 A: |# ^
<el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>& s8 A2 _& Z) X3 Q
</el-tooltip>
1 G% c( u- j/ N0 n2 g+ r8 S </ElCol>
4 q& ^- i% |% D3 y. T
+ ]# h! l$ C1 F8 N <ElCol :span="1" :offset="1" class="grid">
3 z2 p1 n* t4 E0 D <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
8 X" B J! z) T4 F$ P <el-button type="danger" icon="el-icon-delete">Delete All</el-button>5 C1 b/ E& u) f+ [6 L) _( z4 J, Y
</el-tooltip>1 l/ ~) f7 x0 [
</ElCol>+ K; l. \% e% ^3 q8 l
/ V ~8 C' h: O, _, x1 I4 u</el-row>
* S% {' u O' ?0 u, Q% f/ B
; J$ o( Y. C5 ?6 D1 }<!-- Page split -->
- E+ a3 m1 ~+ ?) p- ? }# c# h- l<br>
4 R; h" u4 |) b# Z$ r1 L0 p! b3 k, Z, _: r
<el-pagination background & }! s' }( q4 f8 o& ^; Z
:total="1000"3 D: G: C/ t1 R" T9 @
layout="prev,pager,next">
, {' {$ |/ d4 F* q; T</el-pagination>
, K$ _- W; }: g3 b- F, L2 W% v% Z/ u3 E' l
0 h* ~' [0 u' X7 u7 o- K) U' u" X7 u/ Q6 U; K6 [! K% ~
</div>8 n( m0 m) E# J5 H, _6 S
</template>- z% c8 j% ?0 W( u m. w9 Q" o
$ ]! r, _! [+ E: T& A3 Z) r<script>
m$ ]: A! [0 g1 ?' A( \/ N
; ]: D" X; U: [) wexport default {& ]/ E- S) C j& J
name: 'app',
1 D5 p6 R1 f# g/ l6 z data(){
9 A( Q$ D! r1 b5 H' N return {( N. I# f+ A8 L9 g5 `5 z0 B9 b
activeIndex: '2',7 |9 d; \ ?4 q3 ~6 ?0 h
url:"http://baidu.com",- B+ { d H1 Q1 Y$ w4 N
tableData: [{
: F5 D8 C V, d* c$ B H date: '2016-05-02',
0 C; h' V: E0 P% z name: '王小虎',
1 p# ?( p" q: ~1 m( [% h address: '上海市普陀区金沙江路 1518 弄'
8 e! w% |; ?' w }, {- T$ P8 l4 V+ R- L0 d1 n
date: '2016-05-04',
3 x- H' I5 p) g name: '王小虎',: j) j2 X9 q6 U, U2 u" T; d7 Q
address: '上海市普陀区金沙江路 1517 弄'
, I- y/ Z. j3 t; ] V5 r, [ }, {
6 `% }% L+ a8 ]9 s2 J date: '2016-05-01',
7 l$ D' j. _1 I1 i. y name: '王小虎',! y" X( @6 T/ V% e0 m6 P3 K/ p
address: '上海市普陀区金沙江路 1519 弄'3 k$ c) |# j% Q- s
}, {
, E1 i- w7 d, e/ x! z/ K date: '2016-05-03',
' j; M" N* s7 B9 c! Y name: '王小虎',
# [1 y6 K, {. ` address: '上海市普陀区金沙江路 1516 弄'
5 k' Y$ h4 e0 v4 P4 r& ?! h }]
: ?; t( M3 a% p6 |' d8 S }3 ?& R E5 u! G4 ]
}: c/ x1 v1 i& W5 Q# E
}
) A2 S, }8 {8 W- c {* ]</script>
" S, j) g' d8 J: H, d, P9 \' ?
1 C3 r$ a3 i% I6 C, l<style># F Q5 N4 `6 C( l/ A
#app {, L' O' A8 X4 @- F
font-family: Helvetica, sans-serif;# m/ T, c/ q' d o# |2 l; X% r
text-align: center;1 E# G& T% H! ~8 ?3 p7 y
}
6 z& q0 w2 [8 V4 T2 x</style>+ B. r& G/ u6 _( K/ h
( J* e1 j6 C0 n8 b! C! B3 _) v V7 q7 a2 f" Y
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
