|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习
( M) J4 S% _; }. O4 L+ K& h) P) ^1 W, l/ Q
# j" X, b8 z) ~3 O# Q
+ Q% F8 j/ [! F" c% G/ s( E
<template>1 p# B8 ? a$ o; h1 c3 T
<div id="app">0 T0 g- K. }; B' @6 K( m
<!-- nav -->/ N F- }" |6 g. y
<el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo" 5 x* |' R. I2 @, y5 ^5 m2 \
background-color="#545c64"( B/ |4 d3 y% I3 I, B: r5 i
text-color="#fff"' b' Y$ j7 |2 Q6 c* u) v) J
active-text-color="#ffd04b"
+ p) b& ]% j* D menu-trigger="hover"> B% Z7 L+ ~) H4 q% o- H
<el-menu-item index="1">Data View</el-menu-item>2 Q4 q, Y$ H/ [7 L. T# Z) u
<el-submenu index="2">+ A0 X. m# V/ G- h; Z* _
<template slot="title">Data XX</template>+ D6 O+ {6 M) n- M& Z8 W M u
<ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
7 R" X5 }+ x3 `- P8 ?* K <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
( b2 L! N+ G# W y6 E4 j* z$ ^; K" K <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>$ N3 z7 A; P( i' f; i
<ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
8 x. e' _& w+ z3 V: o </el-submenu>2 m9 O9 f% |9 c1 e" G. L( A
<el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
$ z5 j: w6 N/ n+ _$ v </el-menu>
* g; \; Z* u% g6 ^5 Q3 ~
`7 l7 H' \" c. _3 J$ H+ q0 r7 i& ]) h6 ~# P9 y9 ]% V8 G
<!-- search -->6 B! p) X& h2 ]8 Y) G
<br>
, A/ ~/ q' W, I! L6 c<el-row>
- x1 e1 [2 t2 j6 V6 r% n; G7 C <ElCol :span="6" class="grid">5 w: n; @) d) e( l' f% r
<el-input v-model="input" placeholder="please input the value" ></el-input>
, r. i/ H4 Z0 F9 j b' N </ElCol>
. ]2 F! h" |8 B4 [ <ElCol :span="2" class="grid">4 `0 f, W! q' \" a, n ^
<el-button type="success" icon="el-icon-search" >Search</el-button>1 F% _1 z2 V0 l( R! A# b+ K# m
</ElCol>. S+ ^2 N( A- m
</el-row>9 e. V. U8 D& ` U
<br>6 P J0 A: x0 K9 |% a1 ]
4 V: R4 u) w7 K: J+ U6 `# D' {<!-- table and operations -->
- [* R2 i) Y! M7 q3 I/ i<el-table / G3 v. e+ c6 I8 R3 v6 T5 X* F" v
:data="tableData"
+ F( f8 E. g3 X9 P. ostyle="width:100%"
& A) G# ~5 M- F2 e1 Dstripe
G0 } W& }$ ?6 ^>) h# a$ | a4 w$ P
<el-table-column fixed label="Date" prop="date"></el-table-column>4 m5 S' _# d8 {* J: P2 x
<el-table-column label="Name" prop="name"></el-table-column>8 }* b5 q% U+ T
<el-table-column label="Address" prop="address"></el-table-column>
, o% ?2 P1 O8 n8 a9 ^0 g<el-table-column align="right">
' L+ o1 M6 K# e' N# r<template slot="header">! a' d$ X' P) B6 _. i0 g4 ~1 d. X
<el-input v-model="search" placeholder="please input the keywords"></el-input>7 l6 H5 g. n; d
</template>
9 ~7 }' l% D: K7 T. d5 x</el-table-column># D: l! t$ N4 _4 y% ^9 Q1 M( k
5 n6 p5 S$ P( q<el-table-column>
4 h/ H9 a# K; z$ [<template >1 s" J7 h5 S: y. D5 ], Y. b. _
<el-button type="primary" icon="el-icon-edit">Edit</el-button>* v" {) Z/ e* \) a) }# V( _- r
<el-button type="danger" icon="el-icon-delete">Delete</el-button>
3 e2 H3 N2 r* g+ E4 v</template># w: e0 b( c# H# I
</el-table-column>
2 F; B3 y. v8 c8 x</el-table>; R8 o# X' R* Q+ b6 Y( O% _8 ^$ x
$ M4 \4 G7 z6 ?1 i<br>8 [2 k0 U' l- [) q5 l6 G6 @% N
<!-- Add new buttons -->
: S! C& a4 J6 r2 ^0 f9 C<el-row>
5 b' p+ ?, _6 E <ElCol :span="1" class="grid">
% t8 i- k M. }# Q/ l <el-tooltip effect="dark" content="Add new information" placement="top-start">: J& B6 r6 g+ N7 Q! j3 _
<el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>4 N. Z* Z* `' q, X# X6 ]& n
</el-tooltip>
4 V6 U$ ]" l7 Y( F# n# v: @ </ElCol>
* ~5 y4 G, j5 d) T3 k; u
* C u4 x/ z- M9 x0 w! z$ F1 b <ElCol :span="1" :offset="1" class="grid">5 F! Q4 o6 _- V- O; r% o/ ?* \
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
1 M! u1 E3 }) } <el-button type="danger" icon="el-icon-delete">Delete All</el-button>
, o; U }; L& E6 u& y </el-tooltip>
- q/ F' I1 N/ H </ElCol> D9 [# K0 d+ j* y7 e" e: l
: \ }4 q/ I2 h+ z# ^# z</el-row>. E8 e4 p% j2 ~1 u3 P
8 R/ w5 @& e$ \+ i<!-- Page split -->
4 Q9 P& s7 \" S1 b5 j, K<br>1 n9 s1 t- R/ Z1 s, B
# [* y6 L# {* c% `& O* O<el-pagination background
' ]: l* a$ ?. L. c :total="1000"
2 {: m' ^6 s& T7 h layout="prev,pager,next">
, j( J$ T# E5 p5 X. Q4 V</el-pagination>" \# j% m/ f8 N! F
% `6 l2 b1 F5 z
# Y' g. f5 l& }/ m" y+ [! Z" Y, u: M) M2 x- u( s
</div>0 B/ |9 k5 G7 k- ~9 f
</template>( K5 A+ z1 w5 t
/ @; o0 j- D: g5 C4 J
<script>3 {) J# ]( H' @( T' Z
8 D% ~ e% C7 r% B! @export default { d; C- F. r1 a$ N
name: 'app',8 ]/ B, b2 V, y& F0 M
data(){6 B+ l+ ~: q" c7 w3 t& ~
return {7 u) O: P4 u* B! L3 l3 M/ M! [
activeIndex: '2',* s6 m; P7 p$ w# L1 L4 Y
url:"http://baidu.com",
" E0 j5 p5 d: S tableData: [{
2 V; [( ?0 f( y$ r6 _ date: '2016-05-02',% q2 L, k/ Z V) q, V
name: '王小虎',
, C% D- Z. F! K0 I& J! I3 d address: '上海市普陀区金沙江路 1518 弄'* G$ m* G3 G8 P% y' J8 I
}, {2 q3 H& N# T! M& i% S
date: '2016-05-04',
9 z/ a; w: m( P6 C" D* V+ y name: '王小虎',) p5 m |$ ^4 G1 J! l5 W5 K1 U
address: '上海市普陀区金沙江路 1517 弄'; U2 S+ o! ~5 w: R* Y- c' |8 @
}, {
7 e+ y( d1 F/ ^ date: '2016-05-01',
- ]( y/ k, r7 p- m6 P; _ name: '王小虎',
9 \) y5 d7 F& o, ?% p address: '上海市普陀区金沙江路 1519 弄'
. X+ S" B$ T$ s5 A6 ` ] }, {
$ K& `2 L1 N! X1 ^) i+ g$ B3 d date: '2016-05-03',
, A4 k# y: ? U V( ` name: '王小虎',
. t2 J3 v9 e; O+ y, t9 G8 Q address: '上海市普陀区金沙江路 1516 弄'! K& `/ q6 [5 U9 ] A/ X
}]6 N# j' k8 A+ @
}# v/ M$ m0 o9 Q: Z, c8 {
}, J3 [/ {- d, _0 P
}; s+ I# v; g, n, D5 O" E- V) X
</script>
5 v# g# } i9 {' v7 N5 C* F
9 F [( |: ]5 V- \9 c& D<style>
8 J- ^) l% E: R" o% b6 j #app {- r- L, M4 V" O
font-family: Helvetica, sans-serif;
: K7 f6 Q/ g `6 c text-align: center;
2 M! P+ I, T ^! F8 {/ d# N }
# z. T3 R: n& u* V6 w, v</style>4 y4 ]# H4 R' u8 |
' R6 L8 g" m T: L$ n" e
O+ S1 o5 Z, } |
|
|小黑屋|手机版|PLM之家-专注工业软件生态建设，大模型CAD创新生态
