|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习# R( p3 P/ L) V. f
9 Q, L4 m+ a3 T4 j4 i$ k
# |4 R- H [' U. V0 t7 B; r
" H. i) u0 Q0 a: w3 z<template>
6 {4 a3 Z' g" Q <div id="app">
) {2 a. D) |/ Q! W3 A* J <!-- nav -->
2 t5 y4 h! S7 Q4 B7 Q <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
9 O% W, v. G+ ^! n background-color="#545c64"# X; ]% C$ z( ?. @
text-color="#fff"& k' Z+ w5 {$ R! n* \7 d
active-text-color="#ffd04b"; C0 j! X0 L4 y# ], J
menu-trigger="hover">1 {! L: e7 A% U) i( T
<el-menu-item index="1">Data View</el-menu-item>/ f$ v* O2 R5 a8 y$ }# a- b
<el-submenu index="2">
& l. d- l/ M: D" {( n; d4 P0 N6 k <template slot="title">Data XX</template>5 Q, u) I: x5 i8 }! }
<ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
& j: I+ ^; |' w0 i3 }2 d" ?: W <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>4 G, W9 O: Z: M: F# i, I+ K
<ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
3 q. f: c3 l$ K2 }* P/ _ <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>) ^. c9 }" ]9 N6 }2 M* r( y
</el-submenu>
7 q1 A) s% E$ X! x0 ]* S" B+ \ <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
6 j1 C/ T" h+ q F+ w </el-menu>) x, P6 Y9 _! r- |
) s4 w2 p6 y9 {* l
5 L% F& m- c3 T5 T7 b$ y <!-- search -->
4 N* E- w8 u0 K' {! P <br>
3 w0 v+ z& b* o7 g s' Q" K<el-row>
# s( C+ V; Q0 w: C <ElCol :span="6" class="grid">" a M l2 R8 @& S
<el-input v-model="input" placeholder="please input the value" ></el-input>2 R) w2 f4 h$ g. g; b$ c- f+ m
</ElCol>
. x: g% r6 Z, x <ElCol :span="2" class="grid"> x* a; V# F. Z' x! R) y$ s; A1 w: Q+ J
<el-button type="success" icon="el-icon-search" >Search</el-button>0 c9 z% j' a& l) f
</ElCol>8 J8 h! q4 f$ o& P0 e
</el-row>
- i! t6 T8 F4 Z( H <br>
9 n! K G2 v1 [% |5 Z. s9 _0 C, Y5 s% c! Q! t: x! b. t
<!-- table and operations -->
# M) I. @6 U( q% f( p# x3 q<el-table : A. F# I) T/ b" E
:data="tableData"2 Y4 Z1 d! _5 Z5 B2 u
style="width:100%"- K8 W h% h n" V
stripe- m; r, ~4 z5 O: \; n8 k8 {% l
>. ~0 C h* B! T' s
<el-table-column fixed label="Date" prop="date"></el-table-column>
% M) M' \! C! p# b- a! }<el-table-column label="Name" prop="name"></el-table-column>; N( {3 l2 w0 Z* g/ s/ r9 j
<el-table-column label="Address" prop="address"></el-table-column>
! J* u4 T0 S V. D<el-table-column align="right">
5 v, R7 q7 s; o& q( `+ f<template slot="header">
h6 C, v; ^4 t+ A( S <el-input v-model="search" placeholder="please input the keywords"></el-input>5 x4 }3 _7 Y! ?
</template>% \3 [# |; R/ f9 O
</el-table-column>. |6 ]; x8 x# r- s
0 u! k5 _/ E9 g0 i( ~- _# W
<el-table-column>
0 S( U* N9 K/ i/ M R0 e9 w<template >
' z7 |, n) \: D7 ^ <el-button type="primary" icon="el-icon-edit">Edit</el-button>! ~* d+ d' q) N
<el-button type="danger" icon="el-icon-delete">Delete</el-button>
6 S- ~, i9 [" S+ u* l6 F, @" X</template>) h/ w* |0 a( K' H7 L8 A7 D
</el-table-column>2 Y* X ?1 C9 v+ t5 x
</el-table>/ {; D& L* @- r
" w- @* _, Y2 `2 {
<br>
% t; ^( S7 @5 K$ } W<!-- Add new buttons -->
$ ?/ u* `7 N6 b+ F<el-row>
$ g X$ n6 b8 o) X0 _2 _6 I {2 v <ElCol :span="1" class="grid">1 n. ?( X6 Y0 O
<el-tooltip effect="dark" content="Add new information" placement="top-start">3 i3 _, Y' W4 X$ J& x% K7 r% s
<el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>% R! A& d- R: e1 w6 K) `
</el-tooltip>
4 b, H3 z/ f$ v* o% L1 n5 X. y </ElCol>9 E+ f! f( S! U/ D" d3 J
: U7 |7 X( t, r& M' X <ElCol :span="1" :offset="1" class="grid">' n4 m4 l. ^" O1 J' ?5 ~+ ~
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">* |; z; r$ U. l8 t
<el-button type="danger" icon="el-icon-delete">Delete All</el-button>/ s6 d" d* E2 Q3 K7 `2 g& P
</el-tooltip>1 p. w/ F v+ N6 \2 u
</ElCol>
# n2 x4 h1 E3 R7 T. x" A+ x: n a5 F z* ]
</el-row>
% b5 y" }: w* H: B1 _) ]3 c( S) p$ w P# j
<!-- Page split -->) R8 j, h- Q1 y- U( |7 N7 G1 B9 `2 Y
<br>1 g6 u6 {% Q- f, n
M. @' q% B' r& P- o+ V) p
<el-pagination background ( `4 k; l3 {. e" r% E
:total="1000"
+ e3 l0 t/ |! d; J/ b6 o layout="prev,pager,next">
# H& I/ N2 f6 I6 L& I</el-pagination>
+ _- w5 |! y: ^$ c7 U
( ~# h) @9 v; z1 b
9 _0 x) i" P* i( [# }
; V q& L* H- N) Q: h' z; v</div>
1 D' Q! V* c- W</template>/ J* U9 Q1 e. S. J: t
/ b- r& d' A! a2 q3 B
<script>
3 x) V/ d% y+ b) y0 M7 }7 f
+ O' {9 R' q/ @export default {
5 l% j8 K2 o1 { name: 'app',
/ j# z- o5 w9 A2 m5 } S) h data(){. i. Q- n, V& E' h( R$ w% g
return {
, v: l( ~9 P7 W& l+ X5 i3 A activeIndex: '2',9 b, k2 o0 g! A9 x) R8 v2 n
url:"http://baidu.com",
u# [0 W' G! h+ \: L. F1 I tableData: [{% ^9 G9 c5 K% `/ c& {
date: '2016-05-02',
& K6 B8 D' v+ K/ |: x% `( l& l) ]( ~" V name: '王小虎',# o- w5 n+ M7 S) ^
address: '上海市普陀区金沙江路 1518 弄'5 M( \2 s+ w- i: h- o( x4 M* P
}, {
: f0 Z3 v4 X3 o/ Z* y date: '2016-05-04',
. W# F" @4 \8 c name: '王小虎',
- S, q0 J- S# `$ R* Y address: '上海市普陀区金沙江路 1517 弄'- D6 W) P8 K1 ~9 E' J4 x
}, {" I) r8 H, y" b/ v% c" j2 K
date: '2016-05-01',1 F2 X' r$ G: K% G* {4 }, e/ {
name: '王小虎',
4 j) C; ]9 J% f' m+ k address: '上海市普陀区金沙江路 1519 弄'
3 }; s$ M$ T, B1 ? }, {
" x, s8 X% Z: O0 z8 [+ h date: '2016-05-03',
% Z2 F1 ?" e1 F/ I" T# N" Z name: '王小虎',
3 P# g+ b& J4 l" @( F- e; _ address: '上海市普陀区金沙江路 1516 弄': K* {2 k* R ^3 }- t0 f
}]) q: i5 {; N4 `. Q) d! [1 r1 k/ c
}' x% o* \& r2 R
}
: I+ ^4 g! n' G- |' y2 G% Q}+ A6 t8 v" K$ U' G
</script>
) f; M+ C, G7 _# ]9 d$ ?2 l3 s1 j/ w2 Y, [0 D2 ? w; p7 M
<style>4 N9 C _, i) p+ y% W9 H
#app {
P" o, H9 Q9 c3 m) }0 L font-family: Helvetica, sans-serif;" G; T- b0 d/ P$ ]; s: Q! x2 A
text-align: center;
) s: s5 e- w* o( y9 s) Q }0 j/ x4 o. H4 W" g0 E* A
</style>- K' c8 e4 Y$ R f0 B% C
, S/ A5 J V3 k5 T |& O' I$ ^5 A. } e" k' s T
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
