|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习; f( K& D. e% ?1 U& ~ u1 V8 s
1 L" Q8 n6 r; G
+ Y5 U7 f' N2 O3 w4 v5 G2 W0 ~1 w* j
<template>
]! o, w+ b& C3 r1 v <div id="app">5 J* K3 a; U3 g {
<!-- nav -->
& V+ P2 i" y) h0 J <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
7 S9 b9 f* J% p9 C8 H9 U background-color="#545c64"
8 w. t% Z- }; m, l. M4 E. w7 p! c( ` text-color="#fff"' ^- G8 r4 w3 V6 _
active-text-color="#ffd04b"
6 H' e* Y( }; J! b; }$ k9 x menu-trigger="hover">
1 E0 o3 m7 |9 k- u4 G& \ <el-menu-item index="1">Data View</el-menu-item>
; v# M q8 X3 M, Q( s: g <el-submenu index="2">6 A3 k- i! p2 i& W
<template slot="title">Data XX</template>0 h1 g! ? m* H3 ?0 L
<ElMenuItem index="2-1">TC Data Collection</ElMenuItem>+ c+ `( z8 z1 Z( F1 f
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
( r/ F+ V; ^2 x+ P, m$ o+ \ <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
9 e5 ^( R5 O% b9 z2 F1 v# t" {* d# I; l( q <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
3 Y& R$ \# o: u$ H" z </el-submenu>
' K( M9 g# U: Z' ~5 I u <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
: f# v% e9 p4 i; v( W* B. p </el-menu>
0 }+ V% }* C" p! o. ?+ A9 R- R% Q* ~/ l$ g
9 }$ g1 x; l! r1 c
<!-- search -->& u+ e H. e' B. E6 w$ Z6 L
<br>3 G( u+ H% w$ J% |
<el-row>
' v4 C! V5 v4 L' d <ElCol :span="6" class="grid">
. Z, v8 t2 E% J9 Y0 w' G$ A4 w <el-input v-model="input" placeholder="please input the value" ></el-input>4 O( ?2 H! X5 u2 o7 i; O& ]
</ElCol>) C0 W" ]( L7 j; K q5 z0 Q
<ElCol :span="2" class="grid">) y, L) m& Q' r! k0 k+ S! k" I
<el-button type="success" icon="el-icon-search" >Search</el-button>
0 R( l- U' `$ T2 s' Q2 R </ElCol>' ^' _' z0 T5 L" L4 u( ]
</el-row>' m8 }% e, Q* h0 c( d
<br>+ T0 g9 b+ J9 I) R& h r
! |2 |; n, {9 z. ^1 h9 _<!-- table and operations -->8 i9 s6 e* }* q
<el-table ! o* a/ @. k( l$ H5 R7 O# n, C; t
:data="tableData"& p- P$ a+ c b7 a5 n! f
style="width:100%": @! C: \% P3 {% D
stripe
8 t# \8 x N5 L! ?2 I4 z0 n; f>: t6 j _( m3 S& k7 n* P8 f
<el-table-column fixed label="Date" prop="date"></el-table-column>
) @. d# C* E# `7 F+ D3 _7 h4 D<el-table-column label="Name" prop="name"></el-table-column>
1 Z, W' A# q4 c p8 m R& y<el-table-column label="Address" prop="address"></el-table-column>
1 \ N4 H/ r* T* g3 z<el-table-column align="right">7 h4 e- b6 G1 P# p* q4 |
<template slot="header"># \8 i( W2 \: Z3 x0 m
<el-input v-model="search" placeholder="please input the keywords"></el-input>
! y0 g0 S& S7 h</template>
6 C- q" s* h3 A' Q$ D2 T5 \. |</el-table-column>
( F" X t' \( ~" e& s# I) [; i: R H w
<el-table-column>" i* z, e) H, i
<template >7 }" @0 D4 ^/ L' h
<el-button type="primary" icon="el-icon-edit">Edit</el-button>
! A! z' ?2 e0 S1 _. ]: q% o; Y <el-button type="danger" icon="el-icon-delete">Delete</el-button>8 W. m: l! Z* X: _( j
</template>+ T/ k: g" f4 q* G( D2 L
</el-table-column>2 T. w/ @+ m9 ], v
</el-table>
S: ?- C6 d0 P2 j# N' R, j& H
+ G8 r; d Y9 M h; Q% k/ x<br>
+ y2 X5 k; |! a/ h9 |& B7 t<!-- Add new buttons -->" k, Z; q5 N" ?" x- d6 l8 L
<el-row>
" b6 h! g4 n3 t5 d' m, c5 m <ElCol :span="1" class="grid">
9 x6 t- H! A k3 e. m- b1 W. Q <el-tooltip effect="dark" content="Add new information" placement="top-start">
$ k2 Y4 G4 f" v' H <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>6 K0 N! J6 Z0 H4 }# F8 Y
</el-tooltip> P0 A5 Y6 a3 {6 ~- i5 i
</ElCol>) {, F0 q9 w" `9 e. L. u! ^8 X
& W5 l- y+ d5 I# g
<ElCol :span="1" :offset="1" class="grid">5 X, R Z! [+ U+ {2 V4 e" [
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">9 k9 ^2 S; F$ L0 p7 ^/ u
<el-button type="danger" icon="el-icon-delete">Delete All</el-button>0 J8 i: e& b; u+ N* N7 c0 u
</el-tooltip>, x* k7 v8 ~ m5 F2 h
</ElCol>5 \9 n, k7 d+ }: E$ K
R/ n2 `4 o. P) c# l! G/ m</el-row>
/ |7 y p: E4 O/ T/ U3 W7 q# X7 I# `
<!-- Page split -->! V4 P& A# _* x( @9 l% h q$ c$ G+ z
<br>
) m- Y+ }9 k- r2 p5 q& d3 r2 j
& i, o! O$ D. R- Z. E8 _& d<el-pagination background 6 f. O/ W' K& M1 b& G
:total="1000"
* s; p7 l. A, W/ X9 J5 } layout="prev,pager,next">: P4 }6 l' _8 X
</el-pagination>' [- P. y& ]) Y3 r- x- m
( h8 @. K4 d+ M( t+ U* \0 d3 B. W( ?# c0 Q
$ q6 \8 F# U0 Z</div>
1 i# S* ]( v( f, G+ J7 |; @</template>
& \( }5 h, I3 l4 x
, b7 {* j- G2 h; D<script>
$ B, Z$ q$ e3 u- p3 G- t
: p7 H& I) v7 g0 Sexport default {
' F# l: u8 F* s. t name: 'app'," C! j( j% }" C6 z! _/ s
data(){
- [9 a9 ^7 c% [7 o return {
( n" C8 u& W" Q3 |. b/ `6 w activeIndex: '2',
. }" V! b' Y8 `, j url:"http://baidu.com",. w+ S& J0 \) U3 w7 g" k1 v1 C
tableData: [{: \7 B5 H9 r- ~* V2 z* `+ K2 I
date: '2016-05-02',
( {0 b* _5 k9 d' D5 | name: '王小虎',9 |9 X4 h6 [% R. [1 H) N
address: '上海市普陀区金沙江路 1518 弄'
; ^" t0 Q' j( I" ? }, {( I6 z& P& k# D7 ^) k/ C
date: '2016-05-04',- c! _. @. w/ |6 E$ r$ u. L( u8 M) n
name: '王小虎',
2 W/ ~- u8 Q1 W6 ~. P F, w* h address: '上海市普陀区金沙江路 1517 弄'
# {! j+ B: i; g% J9 c }, {
3 ^0 {4 D8 o! V9 h9 [6 p# @ date: '2016-05-01',$ L, c& E @7 c& Q
name: '王小虎',
. G- _, V n+ Q address: '上海市普陀区金沙江路 1519 弄'
S4 P) m8 @* S% P! t$ c }, {* l# O6 U6 ~4 a/ G% }1 w- E
date: '2016-05-03',
! ^; [4 @# ?- ] name: '王小虎',
# X* }+ l K/ j+ I {# L# s+ K7 W- p address: '上海市普陀区金沙江路 1516 弄'
( _" q7 Q: T* t+ S! I# { }]
% C2 C+ F- V1 I3 D( _, h6 z4 w }
" q! h: f3 t6 u6 v }
- @. X6 o: X' W" n+ C# G}
3 [# y' f4 X7 q7 F* c, U</script>7 M- y7 }) ]" Q' M' K, h
% [( ^) h0 j) O* C5 d<style>
, M! _9 _# q/ `# c3 |0 l #app {- C2 \) \# L7 B
font-family: Helvetica, sans-serif;
0 |$ v1 G8 w/ d) w# m7 B text-align: center;
5 F3 k3 V1 U5 k+ A8 k G }; u3 D9 g7 e3 |5 h3 @: @3 h
</style>2 V. |5 R1 ]# `, p( B
( u, T& f, {6 T% k# ]% [2 \1 k
9 x% O1 p C; O" {) N P# O: K |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
