|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习
: p/ j! r1 d2 S# R3 |) ~* `( O& }$ _9 H: I/ w h% x! n7 |& q
8 l; Q3 M2 b! k% s7 D: ?8 l& t
6 n- S! s1 P- l% v6 S7 {<template>
/ i/ m, |1 \- O <div id="app">! Y) g- i( L7 H2 E Z9 L* I
<!-- nav -->5 R) Q) z- r- f* g2 n. H+ e
<el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
! V9 A+ @ L; T- r5 J! K/ j; a$ J3 U background-color="#545c64" ?# l' v" }2 M# {* R
text-color="#fff"
+ W+ n! m. A! j5 q' v7 U" A! } active-text-color="#ffd04b"8 j$ g0 l& U7 f! v
menu-trigger="hover">
Q0 ]/ ]! `$ g& U; }3 R <el-menu-item index="1">Data View</el-menu-item>7 R' |" ^" y w# Q
<el-submenu index="2">2 i7 i, r9 N0 `7 C2 Y+ }
<template slot="title">Data XX</template>5 V! p4 v1 i& V- ~( u8 g
<ElMenuItem index="2-1">TC Data Collection</ElMenuItem>. G( R1 ~" J6 j$ F* Z* @* w
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
& k' U, I3 k3 v. i: v2 ^, Y <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>/ _7 r! x- \) L+ T$ [
<ElMenuItem index="2-4">XX Data Collection</ElMenuItem>6 j( r5 G }* X: ]1 r
</el-submenu>
Y: K% N+ l# } <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>1 _' i9 t, l; E- C
</el-menu>8 ]2 L' k9 u, v+ T; X
* X: A9 u1 n; T! Q4 {6 j! M
) @; w& N3 z! q" y1 T! q; \ <!-- search -->
# {% T, Q! o1 P a$ c <br>2 s- C- m) M2 S) Q. \, o
<el-row>4 _% l3 L: M- h- \: c+ i/ M6 w
<ElCol :span="6" class="grid">/ i' p" J9 ^' b/ ~
<el-input v-model="input" placeholder="please input the value" ></el-input>
7 {9 z+ x7 e5 D b I7 Q, | </ElCol>
6 E( w( `$ ?! D; H: Y <ElCol :span="2" class="grid">' A' `0 L, F* C: K# K/ @
<el-button type="success" icon="el-icon-search" >Search</el-button>
# Z8 J# t, N: m1 L" `) o4 m </ElCol>
/ G0 A% e/ D" J+ G- H, o) F</el-row>( _7 a, c; n4 X" Y# r* v) q! ]
<br>
7 r8 j1 |6 a: b; y z5 q
9 y. ]+ y8 K( H0 \4 W4 o* O! r% x<!-- table and operations -->: o; \ e1 ~+ j
<el-table
1 p$ q% d* v6 v4 Z5 b:data="tableData"/ W A1 p8 v A1 P& @4 O& M$ H8 T. s+ x
style="width:100%"
3 q7 C- o1 U) Y* `- O6 z) I: vstripe
! R& V. J5 Y! K8 T>
& _, Y$ L0 {4 J4 {+ @& W<el-table-column fixed label="Date" prop="date"></el-table-column>; s6 E L' \* Q! b! p/ D, c
<el-table-column label="Name" prop="name"></el-table-column>
$ B6 z& E3 U$ n9 j4 }3 z<el-table-column label="Address" prop="address"></el-table-column>7 g. S; R% J( C4 w
<el-table-column align="right">
1 [- ?8 z+ ^! a<template slot="header">% P* s* B% N+ l8 |+ s! Y/ i
<el-input v-model="search" placeholder="please input the keywords"></el-input>
. H1 Q- t, b I- ^: ]; U- r</template>5 l/ `, \7 k3 T( `0 d6 k4 S6 E
</el-table-column>* c9 v0 z) W3 W( D
- ]3 E2 ~. o: R! D<el-table-column>1 e- t9 n o% ~
<template ># P+ n+ A& F* H
<el-button type="primary" icon="el-icon-edit">Edit</el-button>( e: O* s: y, s3 ~0 m9 H! w3 {4 E
<el-button type="danger" icon="el-icon-delete">Delete</el-button>
$ k5 T2 q! j2 q</template>+ e* i6 I4 i$ w* z! ^7 x
</el-table-column>
9 H( h% e: x' w</el-table>3 R# g# g. ?8 @/ d
) h z" Z1 y1 N& @. W& r<br>6 x2 n/ L$ F7 K0 k) }5 z
<!-- Add new buttons -->) j5 `/ K$ o7 b. i+ f/ {
<el-row>4 t8 W0 `, D4 W* G- a
<ElCol :span="1" class="grid">" r- h( \4 p. b% l. m; Z3 {) s% E
<el-tooltip effect="dark" content="Add new information" placement="top-start">2 @& p5 [ l# m0 t% ^" p
<el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
# c5 G( W$ a% W. }2 A p </el-tooltip>
) v- v+ B5 Q6 X; H9 I% B# A* z- g$ ^ </ElCol>2 L/ C; W" p6 f+ I
) w! u K( u* ^ <ElCol :span="1" :offset="1" class="grid">
. D3 G5 D" o b2 M! k* u2 ~# h <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
3 \" K; _1 }/ p+ o1 R2 y <el-button type="danger" icon="el-icon-delete">Delete All</el-button>" j4 v J, S# r! a% `, N8 a' j
</el-tooltip>2 T7 K7 T1 X0 d* ^) d, w
</ElCol>$ n7 s# L4 D/ h
7 j9 l- W' C* Q/ I; V. \
</el-row>
8 O* T3 s: }7 J" N( P6 ?% T6 ^1 u" _" m; ~& M% ]
<!-- Page split -->
3 X( J# X4 @* _$ j+ Q<br>
+ R7 a) R; z! F/ a" |
. d/ o' d4 |& E$ Y* u<el-pagination background
) n- X0 }0 \; [1 V1 h4 `( ~ :total="1000"
/ n+ h/ d N; z1 O8 l layout="prev,pager,next">( e" ~- }9 K0 l% b5 L% V* [
</el-pagination>* u2 V6 L2 w0 O7 d9 X) |7 S
. d3 N" |5 m [1 `$ Z1 m3 v+ o) R( Y. K1 a
# v5 D8 |0 t! \) A</div>& ?! }; T5 Y# x) E: Q. u
</template>8 F1 t$ `2 c; i4 B
. {) `, g0 M2 G7 J
<script>7 }5 p# D1 \- s! R- w' D
- d! O1 v( T" b3 l( o, e
export default {
7 U# q" c2 O8 S name: 'app',1 W# [% ^+ H( b# z; B! v9 S
data(){% \5 x; k( Z3 x/ ]5 V
return {" A( ?$ v! b3 d; L4 y- Z8 @ G
activeIndex: '2',
) M# f9 {- Z' e+ V url:"http://baidu.com",
: @9 Q6 @' w7 y2 l l( G tableData: [{
0 M( @7 N$ c2 g( H$ {# X$ X date: '2016-05-02',# p" Y" U; O& P) G; p1 ?7 u
name: '王小虎',, G" g9 `3 I9 L9 B0 \4 c% F) s2 [3 o
address: '上海市普陀区金沙江路 1518 弄'
& g' L( B' J1 l) U0 [4 m4 | }, {
- W$ u$ M- \7 ?1 w6 G& U1 g+ h date: '2016-05-04',
' S5 O7 G7 C! F name: '王小虎',
% Q4 ]6 I2 ?# \( l( v address: '上海市普陀区金沙江路 1517 弄'3 F( [# w( s; i4 q* W3 S
}, {
- P( C/ S' f. g! g5 Q8 a$ R date: '2016-05-01',: o6 _' s! q, W) g
name: '王小虎',$ G' o' @8 l4 U. [
address: '上海市普陀区金沙江路 1519 弄'
! K' \. \ C. l }, {
) m) D0 }" G9 g' [' b% O$ I date: '2016-05-03',2 [; K+ j# g8 f6 [8 j% L
name: '王小虎',
/ g' D8 \: ]' U address: '上海市普陀区金沙江路 1516 弄'% ]/ E/ g( ?3 T9 G
}]' c- O0 T G! o- e" s
}* `( h( W+ l) |& F7 ?
}0 ]4 X; w1 X4 Q8 ~% P' h$ C( G0 }
}9 {+ }1 r: |1 ^: `) y* s3 {. _- Y3 U
</script>, \8 U3 S2 \1 r* F+ C7 q, p
+ R4 m7 r, W! P
<style>
# z; O- Q& D- ]3 G u, e #app {& ~2 p* t! q( p2 r/ g
font-family: Helvetica, sans-serif;
4 x% J* j6 _/ W; X text-align: center;
6 ?/ o& N. }9 ^9 _! N: ^ }% u4 u# v3 b5 x9 r% a) H1 Q( _# V
</style>5 S, D& o9 V6 Y+ U& S; k% T# @
$ a7 k$ c8 ^! I$ t" w% X1 V0 C/ L: O' i
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
