|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习( m: M3 a: [0 }0 D3 ^
+ h$ O! [9 P* g: |" `8 L
. ]& o! ?/ o" }7 |
/ [; ? @; y) @, V3 R
<template>
0 T' f+ z9 N( c8 s" M) l4 ], y <div id="app">8 W9 a q4 f7 _& U! i6 B* t, V" {' _
<!-- nav -->
, i8 |, Q8 ^# I4 ~6 b <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
' @3 [# D0 B! f8 I background-color="#545c64"0 \. z! i: `. V# p7 F" q2 \
text-color="#fff"
0 `" ~2 x9 d: j active-text-color="#ffd04b") }. R& r' t5 Q, [0 ]8 Y
menu-trigger="hover">' d6 G8 c5 C/ L9 s
<el-menu-item index="1">Data View</el-menu-item>5 `4 _! P+ X; C! j: C
<el-submenu index="2">
# w* M; E9 l! w2 i4 W( r3 s9 Q <template slot="title">Data XX</template>- H9 ]! a, }+ e. Z; U: B# O3 _
<ElMenuItem index="2-1">TC Data Collection</ElMenuItem>: \8 N, [9 y4 T5 S4 y
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
: ^- D7 n1 A1 e7 E9 P [. }) s <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>, `0 W2 f3 D2 @, \# m* c8 b
<ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
& X: ?' X7 t0 I# Y </el-submenu> g) m8 V9 i; L( S1 z, q
<el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
6 k1 m( g( d8 N8 o, ~; G </el-menu>
: `$ S p. u# } H8 y/ ]2 T& [. X) A& e
/ G% u& v" `. D: b$ J/ d <!-- search -->* d# j2 y6 Q8 m9 \: v$ H$ ]/ Z
<br>& ?& v6 _5 s) p2 Q4 }3 [, R i! p
<el-row>: P* }' m/ [ w$ x- _9 T+ v+ H, ]
<ElCol :span="6" class="grid">- Y/ E, A, n- r* q2 ^
<el-input v-model="input" placeholder="please input the value" ></el-input>
% s8 E3 i, k ?4 S' v </ElCol>
0 l6 y/ o$ x, a) r: ?; W2 ?5 x <ElCol :span="2" class="grid">$ a: {- q$ B# ]5 y0 q M. s
<el-button type="success" icon="el-icon-search" >Search</el-button>
n; t! H# y) W" }) h# y" U) Q </ElCol>
0 k- {) _! B5 g9 ^</el-row>
. \+ p e9 l# r+ F; ~% K$ @$ x <br>) Y" z! [) q y, ~2 C. O# W; ~
' Z' M0 x% k( {: P2 a7 w# i<!-- table and operations -->
$ }+ J# S" x. s& V- y7 Q+ j' ?<el-table * g7 B. o' r, v: g
:data="tableData"8 N: [' C% f$ \6 g8 v
style="width:100%"/ [9 `( J8 x+ {0 v' o4 a* R
stripe
& P t g$ U8 }7 [>
7 i8 B4 d/ w4 z" Q- B<el-table-column fixed label="Date" prop="date"></el-table-column>4 c8 v1 r5 e8 b' H: B
<el-table-column label="Name" prop="name"></el-table-column>
3 w8 u t, M5 R: {. h' Z& m& J<el-table-column label="Address" prop="address"></el-table-column>
8 }; U* C+ }0 N, e- E" \ |<el-table-column align="right">7 E+ R- E) [, G3 \- g4 G4 K
<template slot="header">
7 s3 ~* S6 A; _; i) o5 t4 q <el-input v-model="search" placeholder="please input the keywords"></el-input>2 E! x2 _5 \% s8 b- Q4 b# r5 p# D
</template>
5 [0 n2 p1 m7 s& ^# ~+ {</el-table-column>
0 P1 f7 s4 l0 B" M3 ?3 s7 i! b8 Q3 V: s* |3 M' b5 v6 }. o
<el-table-column>
/ ]) v+ b5 V1 j8 ?0 R8 X$ i<template >
) S- O; S! J# ~ <el-button type="primary" icon="el-icon-edit">Edit</el-button>& H* w( a- D. Z% b
<el-button type="danger" icon="el-icon-delete">Delete</el-button>
- m6 n0 S4 J' ~& [* |2 M: w" p</template>
+ _9 O; ]( I, o- y2 H! ~</el-table-column>
9 O& w/ }7 j$ d/ m" x- u+ U</el-table>
% ^, I1 T9 A; k0 K" C1 ]: S" T" j7 v. v; l
<br>
( _. j- H- t b! A( h<!-- Add new buttons -->
& H* P& |8 g% `<el-row>3 x4 r( w- x+ ] n
<ElCol :span="1" class="grid">$ A5 w0 J6 x4 w) U( g! ?
<el-tooltip effect="dark" content="Add new information" placement="top-start">9 Y" @( _' n3 m O i" I+ b
<el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
$ ~5 E! r" ? z( ^- d1 i( D; m </el-tooltip>( @( ]- t1 Y6 ^' D3 f
</ElCol>& |& f7 r- U+ u2 J9 }, l+ {
1 L" i: a" c0 ]. ?& ~$ n
<ElCol :span="1" :offset="1" class="grid">5 I2 O s5 X1 h( T( V
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">& f* @1 |& K3 d+ C& H& }9 a: Q
<el-button type="danger" icon="el-icon-delete">Delete All</el-button>) f! H8 p6 m; S+ F) v! x8 t* y2 c
</el-tooltip>
* M- n6 `6 k4 d </ElCol>/ j' n& l: d6 S& k$ h
6 A$ J* {1 x+ m: i( L' n
</el-row>; P& E# _$ {, J' X' M+ J! }- t2 g
* Z1 A- K. o0 F' F$ r: l) U( i% `<!-- Page split --> z5 U6 [( a& x3 x7 s$ N Y' i
<br>4 S8 B7 t3 r& q& D4 N$ s$ I
& w5 \2 U8 v, F5 \
<el-pagination background
/ _4 l( F( t( c2 [ :total="1000"0 s Q, ^% U+ a! R: {( N2 `
layout="prev,pager,next">$ F+ ?& c& ~/ @/ _
</el-pagination>
, y. i0 y- W( q3 m! N: d! t0 ~9 {% c
# H8 @; C; f1 B9 ~
0 C( F) n& D4 b; d</div>& w% A4 q! H+ S& T
</template>* C$ R$ w: y- r" {5 N
+ {' d( t. w# J% W2 v" k
<script>
2 K' `' h" z7 y$ }8 u, k+ @1 L, d. k
/ N( G5 Y+ n* P" H$ D) kexport default {8 `: H, E! |' P! |; B: ?
name: 'app',
7 O( @ `3 M4 a data(){
5 J8 N0 q! H" E; \$ G& m6 R return {
+ _* C; k1 k- [6 O( m* w activeIndex: '2',1 L6 T; @& c; n5 u Z9 `
url:"http://baidu.com",
) A7 t( m- m9 j tableData: [{
% j# _3 n+ i$ U! { date: '2016-05-02',* M. o* B9 k2 X9 q% t* `" t
name: '王小虎',1 i9 q' M0 I. N" M+ O \
address: '上海市普陀区金沙江路 1518 弄'
$ [& Q b% r: ?$ _ }, {7 O J! ?- P, N5 Z
date: '2016-05-04',1 h5 M% r4 J3 G/ Z! e% Q( J9 V" S( I
name: '王小虎',. A8 y+ w7 @" v4 ^
address: '上海市普陀区金沙江路 1517 弄'
2 w4 J M1 Y9 M4 @8 e- @, T- E }, {
: R9 x" M) c' y. O date: '2016-05-01', N& f7 T1 j+ O6 k! I
name: '王小虎',2 C v8 N$ I. S: B5 \% D' l
address: '上海市普陀区金沙江路 1519 弄', g& b7 W- r) ~
}, {$ u! @3 [8 H: y% [8 l5 z8 R q
date: '2016-05-03',, a4 t- b% ^2 N' c0 ?
name: '王小虎',9 ?1 r5 C- J. O9 k# [3 H
address: '上海市普陀区金沙江路 1516 弄'
0 X- e6 ]$ {+ o, L, ^1 e }]
6 t7 d U G2 `; h9 \ }6 d; h! ?4 I: B. D
}
7 V2 G) F2 N. N! u5 f% H( J* e9 b& r}' @ k3 n: ~: C0 ]6 I
</script>1 b! B; y8 t! a/ n5 s& D# v
^# t* l& q$ t
<style>
3 r1 X7 H% Y G9 q$ {/ Z #app {9 u+ c8 n x* r7 D1 A% F
font-family: Helvetica, sans-serif;
. Q( u( r. W- O, Y9 d5 I, T9 a text-align: center;% _- T2 h; F: T0 M
}" k! ]; F' D+ f. }7 a
</style>: l0 x- X7 _ K4 ^0 r) F6 X, i$ o
9 E0 m- E! q" f3 b7 q
C) D% i9 E, G1 ~
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
