|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习; P2 C' ^4 N: Z* `+ h& v$ O
% |" l6 J( \ g
2 Y" f6 Q' K- F8 N3 y" H" O$ S5 c& m
. T' C* `0 T5 T/ G) ]3 M<template>5 L: J: c& Z1 q+ N; L4 y6 G
<div id="app">
) B# b( |- [ y5 M3 x% u <!-- nav -->
$ c2 @+ q, J! X. V9 X! J <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
4 \, h3 F9 t7 Y0 y3 P background-color="#545c64"
, _1 N1 P- ?" r text-color="#fff"
P2 o5 Z5 e% N: P9 o3 O active-text-color="#ffd04b"0 v# A3 a8 a8 @& V
menu-trigger="hover">
, Z6 t8 ~( t' U& C <el-menu-item index="1">Data View</el-menu-item>1 y7 X/ _1 d# Y- c
<el-submenu index="2"> P8 f8 h8 ?+ g4 ?1 [6 K. |
<template slot="title">Data XX</template>
* g! G8 X3 m1 y/ x <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
; B2 V3 R& n5 T) a2 e1 X <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>/ n# V% N$ c0 c6 S2 s* J) d
<ElMenuItem index="2-3">XX Data Collection</ElMenuItem>: o- Q( u! b- K
<ElMenuItem index="2-4">XX Data Collection</ElMenuItem>) C0 {7 }! S3 [# E. ?2 \
</el-submenu>
0 M2 f, m' z4 `- f: i9 O8 g u! n <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
& D e; R5 ^! T% J; }3 ~ </el-menu>
* w# x; w! m0 o; D! m6 a# x( } g" a" L8 M0 g- ]8 U" l
2 D B7 D. G% L3 I# L7 ]
<!-- search -->
9 U' g, T, v( ~' P4 ~ <br>
. s e- F5 {0 g$ m- H<el-row>8 o# p+ c7 F! _. e9 @
<ElCol :span="6" class="grid">) u( G2 ], F. @' z
<el-input v-model="input" placeholder="please input the value" ></el-input>% X5 q. [/ |* s% ~. q
</ElCol>
. M6 u" e4 v9 r <ElCol :span="2" class="grid">, P0 \0 o, i/ k7 r$ E- x; _2 A
<el-button type="success" icon="el-icon-search" >Search</el-button>5 ]1 b9 ]) N1 a. K a
</ElCol>
$ d/ O- u4 [' i2 {</el-row>( I& k" j/ f, R: I2 |& Y3 |- m/ `
<br>
/ v: r3 Y6 d4 j, g' w, V1 I
& j6 b7 u N7 T<!-- table and operations -->
b1 B/ h6 V/ t: e<el-table
! ?# |& T/ X, [1 r2 d:data="tableData"# g& k7 w& B+ k: b
style="width:100%"0 L X' R: j# T b6 C. ?- i
stripe# c8 Y+ h7 g. a+ y/ E/ c1 o2 ?
>" p1 B0 E/ {* C4 Q" {2 W
<el-table-column fixed label="Date" prop="date"></el-table-column>" [& V& ~6 i( f/ ~& N
<el-table-column label="Name" prop="name"></el-table-column>
# ^7 U2 O V. n. n5 L) @" Q( i$ f<el-table-column label="Address" prop="address"></el-table-column> p% G9 h% G4 r
<el-table-column align="right">0 O7 j) T, ~! b$ u
<template slot="header">$ W0 [6 R- B" ^8 {2 N6 Y
<el-input v-model="search" placeholder="please input the keywords"></el-input>
3 G# d$ T( c4 |* x" @& M</template>
& F- t$ E$ z/ c2 o) [1 r9 q</el-table-column>
8 R/ _( E+ o2 ^. n6 s. u
# E, e ^9 L8 @/ W G$ @<el-table-column>: A- S( z8 r8 ^6 V U( @! ~
<template >! H; h# t$ L3 I2 p& h5 M9 _
<el-button type="primary" icon="el-icon-edit">Edit</el-button>
3 W2 ~% x" Y ?" j0 }3 D <el-button type="danger" icon="el-icon-delete">Delete</el-button>4 T) X9 N" r+ O, m* [0 V0 K
</template>$ @/ Q( R6 y/ q+ U, v6 F
</el-table-column>) q7 `2 c; V/ u. K
</el-table>
, p! w! H; u& |/ u7 r2 @' T
" f2 Q; ?' M, F<br>7 u: Z8 V6 ^. n4 C W* |' P3 @! |% D
<!-- Add new buttons -->6 {) Y: x- S) p% K( C
<el-row>6 r( S% X. z3 a* U
<ElCol :span="1" class="grid">
# S. w( L$ K4 l3 T4 p <el-tooltip effect="dark" content="Add new information" placement="top-start">
4 L) X4 l: P7 s$ K <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>3 t2 N+ ^" ^1 b* b2 ]/ g
</el-tooltip>" n" d2 G0 u$ D6 S% z
</ElCol>
: K7 h5 O2 v; C1 s) {' P7 s; G/ b, ]: n+ I( o0 F
<ElCol :span="1" :offset="1" class="grid">
2 ^2 [0 S, X/ W6 B <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">: ]; e0 Y& ?$ e1 {) G8 d! m
<el-button type="danger" icon="el-icon-delete">Delete All</el-button>
/ ] H9 X. P, L- m. l. ` </el-tooltip>
/ R8 V% ?. M$ [) Q </ElCol>
6 S' T- w- v7 v9 U+ y" L6 p) a# U" g) K, g2 b0 L) Q! ]
</el-row>$ J2 Q/ J2 {% e. ?( L4 i
8 D7 e$ v, w2 R3 X' o
<!-- Page split -->) i, H! N9 g$ C& A* J% S
<br>
4 ~5 p# c2 V+ U. P3 t$ J' J: w k4 w- N# c, g" d
<el-pagination background
6 {3 p# Y. {: |" |2 d :total="1000" `# [' f8 N0 V* f1 m+ o
layout="prev,pager,next">5 ^. z. y+ a0 b. R" t
</el-pagination>& m O" j0 }- s* B F
5 N% R; U" ?7 A7 g- H
7 i4 q) P8 M+ p) b. N
1 s7 K" j$ T7 V) }% Y1 G</div>( _" }6 i4 Z2 R7 F9 k5 X
</template>
0 ~! I; d8 {8 i1 w/ O P7 e
2 e- v0 b1 T+ K+ Z<script>
, r3 p0 d( T! Z: B# S1 y. p) p' d# F6 }9 C
export default {
, K% X1 n6 V- y% N) o name: 'app'," b, l% z7 u3 L, X0 X+ b& P/ O3 T6 Z( [
data(){
& B' h- [2 o7 c% |: e: J return {; T! Y5 a5 c4 D9 v0 n
activeIndex: '2',
1 g4 `+ i, s1 b6 q& L+ B url:"http://baidu.com", S5 C4 z H! U* P
tableData: [{6 E4 ]" P" b7 m9 z k% W; |
date: '2016-05-02',
% J& R5 j& i* q name: '王小虎',9 u+ z0 Y9 I" ~2 i0 ]5 L
address: '上海市普陀区金沙江路 1518 弄'
. P% k7 p$ m/ A2 ?5 r0 q) c1 m }, {
8 C- A% a/ a, }$ v+ {, Z) V date: '2016-05-04'," O0 _0 O X( h% Y( f) l
name: '王小虎',
+ l. h/ f! e$ [ address: '上海市普陀区金沙江路 1517 弄'
( r% T$ e, y1 t: v }, {
# ^5 k1 v: p( K3 C date: '2016-05-01',
9 O9 \# K/ S6 i6 ?1 V2 J% z* f& v7 L name: '王小虎',
/ Q& w X% {3 b, a' I, g% ~ address: '上海市普陀区金沙江路 1519 弄'! U, q) O4 F! t0 J6 {5 N
}, {2 R2 ?1 e! b7 p8 K7 m2 t
date: '2016-05-03',. Q3 |. F5 u. X) g
name: '王小虎',
v5 [6 e. V0 b6 H address: '上海市普陀区金沙江路 1516 弄'
2 k/ N e2 \% E$ _7 t }]! ^: P8 U+ o+ P
}
; f" v: _9 o$ M: `% I( h& f3 b; u7 W }& i; V0 X0 g2 R
}% i e2 b) V, q% `- c7 A0 K! t2 p
</script>
& v8 Z9 e& ~: P* C
+ Z! a3 t; j8 Y: W<style>
# `: a2 w& N( G( C# E2 U3 u #app {3 N7 k/ k7 _0 _+ o
font-family: Helvetica, sans-serif;
" X6 p. Q% K5 @ text-align: center;# @1 q) D# a; N) {. O) C1 e
}) ^# }& H: k$ ?0 `0 {2 @ M
</style>6 `# X. G _* s6 M
/ O- ^0 G& G5 X0 z k5 a3 X3 V
, j0 F1 a3 O% n) m v |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
