|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习" H" J5 z5 z0 u9 R8 L3 I
% y; N$ X' C+ t, u
6 D9 E4 T# P S7 l( Z
: `# q$ \! l$ J9 q<template>. Z6 C: `0 U/ K# q9 ]) e' i
<div id="app">
! Q7 N5 U& |; x- r: r <!-- nav -->
2 y X: h: k! O' W O" P <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo" 4 O# d+ o- _" z6 }9 [
background-color="#545c64"
3 i9 B. }; h1 u( c9 o text-color="#fff"
9 B y$ D# E1 F# j active-text-color="#ffd04b"
% K; k% r* i, h( ]/ h menu-trigger="hover">6 {& K4 n! g" L# N F
<el-menu-item index="1">Data View</el-menu-item>; R/ K( H4 E0 s1 @
<el-submenu index="2">
0 b5 P3 P, t3 |9 M <template slot="title">Data XX</template>; r5 S; _+ V- ?% u
<ElMenuItem index="2-1">TC Data Collection</ElMenuItem>5 l3 a/ P9 M9 c* i" E2 \2 }. I
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
* t# F' X6 S. F$ d <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>4 m3 Y, a: Y% W* x
<ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
1 {# ?% Q4 D0 Z) h </el-submenu>
; {4 Z7 C* |- K8 r6 ~( L <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>7 g2 a+ E9 o$ ?- }0 D/ H1 c
</el-menu>
( G8 \/ n7 ~. X/ q& q& t2 O% U) B+ e" ]- W5 [: H+ U3 e
5 _; G" d& d3 t0 w8 J: K <!-- search -->
8 e9 j0 a, f7 j/ }' k$ V" e <br>) D' |" C m& d/ K
<el-row>
! i8 K! [3 j7 L4 v* r1 y <ElCol :span="6" class="grid">! ?9 M3 _! ?# [+ e7 n4 x
<el-input v-model="input" placeholder="please input the value" ></el-input>
G" H7 q* z6 X" ^2 Z </ElCol>
. S$ q: p& Z$ s$ N4 r% }3 o6 l% l <ElCol :span="2" class="grid">0 ^9 o0 ]1 n# F( A
<el-button type="success" icon="el-icon-search" >Search</el-button>
$ s4 D" k! C- }! } m </ElCol>6 o4 P5 F, l4 p3 v
</el-row>
, }( K P8 I' H <br>$ D& a0 |5 J) V& T
6 q) ~! U7 ]4 I# }: ~* q8 h
<!-- table and operations -->
+ S1 I/ h) a. A! [4 |) f, a: S7 y<el-table
/ k1 W! h# Z$ r% l:data="tableData") [2 F8 y, Z7 V- |0 e' h
style="width:100%"
1 N7 Z4 X2 E' sstripe( x+ x$ k% `5 d9 E m/ Z L
>
- n; _3 k ?1 z* S) r- q, H# A<el-table-column fixed label="Date" prop="date"></el-table-column>! v5 v& Z8 C4 Z8 ^$ W
<el-table-column label="Name" prop="name"></el-table-column>! Q; S3 ^. k% }/ Y
<el-table-column label="Address" prop="address"></el-table-column>
' H8 F- I2 ? A7 }. Y( U<el-table-column align="right">
5 w0 o/ d7 l# h1 R+ T) m) c<template slot="header">
6 ^( e, e" ^+ \( Y5 \ <el-input v-model="search" placeholder="please input the keywords"></el-input>+ X: I$ L" F6 Y7 L$ n
</template>
/ D \8 B4 q1 O3 {) ~( M</el-table-column>
+ n/ L1 _4 p- p8 t7 X, C" U
; T8 R/ x9 g- M9 Z<el-table-column>6 Y2 h X% W z2 y4 h
<template >. t, O% m+ B7 m
<el-button type="primary" icon="el-icon-edit">Edit</el-button>/ g6 o+ ^+ n9 O, Q9 v
<el-button type="danger" icon="el-icon-delete">Delete</el-button>
1 A5 }5 J' h& w( ~$ I, f$ ^</template>2 S) w8 K0 a7 D6 A3 n; \
</el-table-column>
/ {4 C2 c) f" |! y Z</el-table>7 S! u6 w0 i4 N5 Z0 r
$ W c! b' f3 k& R' \# k* y
<br>
/ A3 e2 i( V" {( g<!-- Add new buttons -->! ]1 B0 l3 J9 V; l; J' z
<el-row>
1 e$ A [- G/ s* ?. p4 p- t. ] <ElCol :span="1" class="grid">+ q8 I1 e! X: k. F# }) J& D
<el-tooltip effect="dark" content="Add new information" placement="top-start">0 q7 l) x: w/ a# m
<el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
3 }6 s W! l X' G0 H* T; t </el-tooltip>- J; g! @9 d5 E5 F, s0 O3 M1 j- [" {
</ElCol>
. n2 F8 X4 r, o5 f: L6 G9 V9 e( N6 c+ j" C/ Z8 o; f! g+ p
<ElCol :span="1" :offset="1" class="grid">
. O* G% G6 `2 |7 V, U+ s0 y <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">$ [6 Y) v- ~! v) l) q
<el-button type="danger" icon="el-icon-delete">Delete All</el-button>
1 M& c0 p4 O4 x$ z- }2 ~; h4 h </el-tooltip>5 _! B% m3 f& _+ m: ~2 F3 e; m
</ElCol>5 x6 c7 Z9 _; n2 @3 I1 P
7 w& p+ c; ^( L3 p! b! q</el-row>: R x: M2 l* n. h) _+ {
' }( N T1 A$ U" S
<!-- Page split -->
1 P0 J* I) S k" j" C9 K# ]<br>
0 e: j& l' Q) W
( M& N8 x4 _. P4 m<el-pagination background
7 l8 _4 {5 C1 \1 I7 l& t7 u :total="1000"% P+ |: E. G$ s' k4 A/ |
layout="prev,pager,next">+ K5 m6 z* j0 j/ U k: g8 `6 L
</el-pagination>
; w# y' I) B' z3 A7 V+ q0 G) h
! i( ?* c/ T. \8 C9 l
6 D4 I# [: z) \, V8 ~( v, {
& l. M" o, H6 n! \</div>
1 n2 l% L( i. I% d" M5 R( s</template>/ Z5 l% W' y, Y
4 c; W4 \& D- Q: @! P$ [# R$ {<script>
) O8 J F% i# ^, p3 `' h2 o+ x/ Q$ Y* p) H' s6 l
export default {9 p) m& Q* v8 F# c
name: 'app',
; b+ z2 O$ t, k8 J, T4 ] data(){* G. J& P @- [+ M) ?4 J
return {
4 r5 C& U9 ]7 x1 A$ S activeIndex: '2',$ T) l5 c4 n' ] n& g
url:"http://baidu.com",
0 x# i5 c/ l# |, f5 W6 i& } tableData: [{
7 D4 G1 o, C0 B: e' ^) ?, I date: '2016-05-02',
3 q$ N+ J4 @/ y4 {8 D* l name: '王小虎',
, ]& n& n0 Q* g address: '上海市普陀区金沙江路 1518 弄'
% V* U$ Q5 W0 N# K/ C }, {
2 g7 `6 X' t& M% x A8 d date: '2016-05-04',
}( L% d" `" ^ C, R. g+ h; S name: '王小虎',
, \* N5 f2 A7 V0 q! w address: '上海市普陀区金沙江路 1517 弄'/ r8 t. y2 M7 x( p F
}, {
8 P; O% {* X, ?) f date: '2016-05-01',
/ B' D9 k% j9 O9 }6 @3 k# m' u; f name: '王小虎',8 n) q# o" i! d; E+ |0 M% K( |
address: '上海市普陀区金沙江路 1519 弄'
/ I( p8 `' W, }$ F: e8 {& | }, {
# p5 S$ u& @, [$ x date: '2016-05-03',$ ~. u+ T* P6 r. [. x4 A
name: '王小虎',. t3 g6 {7 q4 G+ v- Z- q# Y! T
address: '上海市普陀区金沙江路 1516 弄'
( m4 n: C* Y8 @" G. N, w9 I }]
- }( S. {# k9 G7 } }
* V: g4 k3 B5 r" T }; }( ~5 U. @) ~4 R
}
' S" @- ~3 e% [( h1 A</script>* q- Q' ?7 x; _+ X+ u/ g; ]/ h
& g* U1 X/ C: j! q
<style>
5 g+ S8 X6 Q5 ` #app {
( g4 k4 B# w. `" d" H$ j6 L; F font-family: Helvetica, sans-serif;
0 h" s/ k4 a/ R# x text-align: center;$ j2 m+ a( r4 y8 i: R j! x
}$ m1 \4 ^/ m& t2 y/ M
</style>
c0 D# W* X: }% K( l5 b
: B! F; u( y& e6 w4 z! o3 i) i# A8 U) V. H% u9 S. A
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
