|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习
' X- `6 P- P7 c3 A6 \4 }" _# {6 P# G6 D7 a; e
, `. H) z9 s/ U1 `$ j* x2 {2 s
: K: E$ l+ e2 C! Y% M<template>0 Q5 s9 d* v; K3 ?6 t& ]" ]
<div id="app">
5 m2 F; E3 j6 x4 R$ r" C, }0 q <!-- nav -->
& X) r4 `5 H5 `2 W' E2 [! M; D4 a8 i <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
w1 k! e# \. u. i8 ] background-color="#545c64"
3 W: C/ p* m5 w0 S text-color="#fff"
5 i e1 b3 N: B( {% q: @9 |- T% C9 _) P active-text-color="#ffd04b"! K6 _7 A, m( r R( J
menu-trigger="hover">
& T: x6 F" U# X2 `* U' E6 E) J) A* m <el-menu-item index="1">Data View</el-menu-item>5 ^9 J# g# M. N: c
<el-submenu index="2">
7 x# s- x2 _( Z, d, l8 Q <template slot="title">Data XX</template>
6 c& V3 K* [$ `2 _7 M <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>! e6 W4 N' I" r; v; l6 P% r
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
/ }7 @1 w m, O e0 P6 b <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>8 o l. G* M0 |
<ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
) j; P$ x. }1 c </el-submenu>& T9 W! I- Y8 w4 J1 e1 h% }* ^
<el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
; d p+ p9 z! i' N6 [5 X1 A </el-menu>
( \$ d: U1 [( d" A) b& k, ?+ E9 @; g% x/ R1 ~9 I* S& g
) Z- `8 T: q$ H9 g# ~
<!-- search -->
4 b4 z4 L5 J. D8 x0 U <br>
1 b9 O2 [& I& E8 ~6 l<el-row>. [ `0 k7 y# o, U; B
<ElCol :span="6" class="grid">3 ?7 ?+ T1 O; h4 Q- P
<el-input v-model="input" placeholder="please input the value" ></el-input>
5 z- x* p' c9 _5 k T% a </ElCol>: o8 A1 L5 `+ u# \# m+ o
<ElCol :span="2" class="grid">* L! R0 B& n8 c
<el-button type="success" icon="el-icon-search" >Search</el-button>6 d7 D' A% F3 W
</ElCol>. R' T$ d D! M- a0 t D
</el-row>: i# t- u, i$ |' b) d: U
<br>
. R( T x: i- f# d
' H- y8 g, v; W' l, u- P. s( e. z<!-- table and operations -->. y4 R# W3 Q, t3 b8 z d4 v4 z
<el-table 6 e: H* l: N! S' Y z1 p" `& Q
:data="tableData"6 x% U" g M* A% h1 i# j# W
style="width:100%"
0 ? p# V7 Z: V w6 `+ w, T6 d/ [stripe
4 R7 M8 ^6 H; h4 ], I& t1 u+ D>
2 H8 _- v7 O' c) ~& ]- B<el-table-column fixed label="Date" prop="date"></el-table-column>
" ?- w5 {7 z2 s1 X<el-table-column label="Name" prop="name"></el-table-column>
: J0 d( p& d: v C! V) k% v<el-table-column label="Address" prop="address"></el-table-column>, ~4 K$ p7 h3 t, X& P
<el-table-column align="right">
! P( M3 F. p6 D7 B7 [" y<template slot="header">
& a/ C. T7 P. b! [ <el-input v-model="search" placeholder="please input the keywords"></el-input>
& S* U* d9 v* O</template>
) U& K K( Q5 {- D$ v8 c4 q</el-table-column>
! d# Z$ a) J5 o6 G4 S& p" L2 h: e6 \' x0 B
<el-table-column>
1 T$ w9 n; b1 e. P<template >
, g/ ~% P; f- g$ _/ Z% ]' R r# ~ <el-button type="primary" icon="el-icon-edit">Edit</el-button>
# f! @1 F8 j$ W. m) {( f4 i <el-button type="danger" icon="el-icon-delete">Delete</el-button> M V4 ?7 Q6 Y8 M. \/ a
</template>
5 i- R4 S- e3 s6 q8 z0 R" V</el-table-column>
0 }( t: K O1 w! z; s5 X7 R; q</el-table>
$ `# D; S5 C3 V& M, t7 i& j) _. [+ t; n5 P
<br>3 b' W% d1 o+ m4 o
<!-- Add new buttons -->5 ~2 D4 e2 l) P- j5 A) O6 E4 i
<el-row>
- c S$ b: Q3 m1 `8 R- L <ElCol :span="1" class="grid">! O c! u' k' h5 p' y$ h
<el-tooltip effect="dark" content="Add new information" placement="top-start">
! `& s4 J2 g$ ~, G. O; f <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>$ L/ J u$ v+ Z9 J- M4 ?
</el-tooltip>+ j$ {3 U0 |+ P" p
</ElCol>
0 h" F1 H- U+ ]0 y# j7 @5 T* z" |; c E% x) @1 U
<ElCol :span="1" :offset="1" class="grid">
8 c: l! X7 N2 \; l3 Y: T <el-tooltip effect="dark" content="Delete All The Information" placement="top-start"># y0 [, h5 U$ y' |$ m) ^( a) M
<el-button type="danger" icon="el-icon-delete">Delete All</el-button>. J* r$ g+ `9 o
</el-tooltip>" H, f# o8 H+ W& d4 }: D E% z+ w- K
</ElCol>
2 \2 q, }) p( A- g5 t; Q4 G, [; K! G
</el-row>
3 O, o2 X! m3 i1 V& U
4 q2 o- ^6 r/ D0 u5 x- u' |3 R<!-- Page split -->' J7 ?6 B' \: I5 m1 k
<br>& t& g- m3 ]3 j6 T# ^9 y7 ^
B$ i8 f* O" b V. g
<el-pagination background 3 I0 O% t n7 U/ L% z& f
:total="1000"% F. C" t' ~* p
layout="prev,pager,next">& Y0 ^& v" H, n1 M9 l
</el-pagination>" Y0 P. H" p+ u6 C% B1 x2 L
! D0 N G/ `+ T a
) N4 @0 O& v+ ~& H, [7 b6 d& W! U* m1 {, f$ |9 P0 M+ @
</div>. s3 S' m% Y9 b4 G
</template>
& ?+ H4 \4 ?5 r$ V# f! A9 c8 p, Y3 t0 t- Z: f5 D
<script>3 `2 p6 m! E v& @6 [' M
; k# A2 c3 L: @/ B1 M; n9 M, n( jexport default {' w4 J4 J( f$ q) i% d- Z1 @
name: 'app',
, Z3 K2 ?$ i/ M, O1 T$ K data(){
7 |5 N# R! M7 J$ Z! X$ _ return {1 E* s! t' z" u6 o& m' w
activeIndex: '2',0 a; n# I8 X7 Q% \8 k# E
url:"http://baidu.com", k+ p( h5 ]- G& |* {% I
tableData: [{
) A* I# ^8 S: e, T& U9 ^" H$ b1 q date: '2016-05-02', M" h" Q \" ]( V$ f8 f- c
name: '王小虎',3 U/ y8 K5 g8 m; z3 j
address: '上海市普陀区金沙江路 1518 弄'
' m: d& v$ h u: G( j9 p; C }, {+ N$ u& j6 [& |: y" R/ I
date: '2016-05-04',& K/ H) L! |' K8 @& d
name: '王小虎',
& @( ?- H/ y# j& i# _ address: '上海市普陀区金沙江路 1517 弄'
6 b2 a+ G2 W2 E$ B# s }, {+ M* q! G4 H/ a6 F* s7 z
date: '2016-05-01',
6 ~% T. s: D: a3 B name: '王小虎',' \1 U& U# t4 w2 k- u4 y6 Q# a
address: '上海市普陀区金沙江路 1519 弄'; P$ U$ ?* B. h
}, {
: O$ E9 V G! Z; M# O date: '2016-05-03',
2 J$ Q: A- F5 M- D3 _) \ name: '王小虎',
0 M) i( i9 U Z4 Z H$ y# A address: '上海市普陀区金沙江路 1516 弄'
1 P( Z# |5 u- s- N }]2 D* R: G4 |2 a$ k5 l6 L
}. t1 ?! @ N. N: ^6 P" h0 ~
}
5 v) S: S$ I" r9 E6 k) i}
/ u! Q* J" m- b# W" I- r</script>' f6 b6 P/ S, Z4 O: w
6 g; R; ]6 d" H) ]4 r" {/ p
<style>* Z; e4 i4 U- r9 F/ s
#app {2 e% G; N( C5 Y, V$ _- Z
font-family: Helvetica, sans-serif;
4 s$ E5 U) W' y6 h+ c text-align: center;5 a7 d1 @' R$ X/ }+ I7 C2 u
}
6 j0 J1 N( Z5 e</style>
( s8 w* y% n& E6 b& \ S3 }* Q1 V$ }0 \" s$ T7 F5 A( C, ]0 a
! d# F8 s8 K( G# v7 d5 m8 E
|
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号-1 )
发表于 2019-3-18 15:13:56
