|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习
( w3 ~( d0 R# g$ J
! d1 |1 F Z2 f4 B& l4 p) a
, _: Z8 W/ S8 z4 W3 S2 B" H
! I' @7 s1 l- O+ Z5 g+ Y<template>' y+ T1 W- t# ]& S4 s
<div id="app">; o# n) y p! @4 L
<!-- nav -->+ G6 r' I" E$ Z2 u
<el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
$ c, P( p% T( ]1 b5 A8 b1 d background-color="#545c64"8 E# y- u& n, ?; R
text-color="#fff"
- R! {: C/ ~3 N' j2 ` active-text-color="#ffd04b"% ^( l! v+ k+ ^+ z2 z
menu-trigger="hover">9 U0 n7 G- B$ l) e) I( m
<el-menu-item index="1">Data View</el-menu-item>8 _5 M4 L1 O. _( t, x# P
<el-submenu index="2">2 B ?9 N: V; t: I. ]- S( f/ T
<template slot="title">Data XX</template>. u: b( E4 R: z: |# n
<ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
3 F1 v I+ Q: B P. z- x <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
! u7 t, n# ~9 d5 u- e7 z& J <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
4 Z* {; K" V+ `( w9 l/ C, I <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
' {9 _, w% Z3 ^. \) g </el-submenu>
% X$ \) z7 G3 a& N+ z <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
' G, S8 G L8 C1 C" P </el-menu>: ?# K# E+ x' Y
: a2 E$ O7 Q& \: O) Q% g! \7 f/ _1 J9 e2 o; V/ s
<!-- search -->
- `: K4 l' \8 p% u4 T) \, j. v7 N <br>
2 D" E" x. R4 e- k) A9 _<el-row>
5 Q. O4 s& ^' X5 I <ElCol :span="6" class="grid">7 B: A2 ^' y w4 m- Z
<el-input v-model="input" placeholder="please input the value" ></el-input>- n8 Q: S) m$ b f+ G
</ElCol>2 {' r/ V$ Z t) o. T; h6 @* r. B1 e: P
<ElCol :span="2" class="grid">4 H- _2 S! |" X( I
<el-button type="success" icon="el-icon-search" >Search</el-button>
9 j P0 J m$ F! O </ElCol>
/ ?! A7 `9 l+ c</el-row>
: i. E! H( }1 G9 R- r/ [ <br>
* G2 W) }5 L6 Q- I3 m' g$ l2 M9 o" _) {( \
<!-- table and operations -->
N) d3 ?/ g* J, y<el-table
* S( z! v7 k9 y B' l0 [) A:data="tableData"
/ z- P2 @6 @0 _9 e: i& }( J# z, @8 G1 Rstyle="width:100%"0 `% H2 y e, y" Q! ^
stripe
# C6 O5 ]6 C0 _4 _8 o% w8 ~>+ u" y5 T0 M- O# H% T
<el-table-column fixed label="Date" prop="date"></el-table-column>
3 r$ ^" l4 V$ b2 n# ?<el-table-column label="Name" prop="name"></el-table-column>4 j7 j, Q9 n: \0 [" j8 ]
<el-table-column label="Address" prop="address"></el-table-column>2 |; x" r3 I( V2 Q
<el-table-column align="right">
: Y9 y1 q1 x. l* F' W<template slot="header">
8 B5 y% }- p1 E; P <el-input v-model="search" placeholder="please input the keywords"></el-input>
0 h" o& i2 u% l+ ^+ p& ]</template>8 g |0 y$ H% g. ]7 ~
</el-table-column>+ X4 \! }+ P5 K+ N2 u
2 j& {) {9 J8 K0 j7 _- ?<el-table-column>- ~- U1 S1 b7 s' W
<template >
- {- l: a: v+ Y. k u& h <el-button type="primary" icon="el-icon-edit">Edit</el-button>0 s0 h! W& A/ j$ y
<el-button type="danger" icon="el-icon-delete">Delete</el-button>$ t+ O+ f* q9 Q# E" h
</template>3 j/ Q$ r/ E8 y: W
</el-table-column>
2 j/ t6 b$ k) U- R w q1 u</el-table>
$ ^/ o L1 W, H% F% q
: }, }) u7 I& d7 \# l<br>
+ T" y- R0 E) m! T# n/ D" K9 W1 v<!-- Add new buttons -->0 I; `# I9 [( y' Z& R _: H6 A
<el-row>3 S% d' x; k" `9 D$ a" F! `
<ElCol :span="1" class="grid">$ @; y# Q! O7 t% N2 U H6 c
<el-tooltip effect="dark" content="Add new information" placement="top-start">
# F3 z- x) s3 v0 R <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
. `8 H# X e4 P; B </el-tooltip>
' x9 T( ?' s. T2 m </ElCol>
, X7 a7 J5 K/ D; b$ a9 b/ ~" \9 q3 h! @8 a# o" H
<ElCol :span="1" :offset="1" class="grid">2 H! S5 u& b9 q7 _4 b8 M
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">: h0 s4 C! d; X+ s/ r& n: V
<el-button type="danger" icon="el-icon-delete">Delete All</el-button>$ S8 A a, K% I
</el-tooltip>% c6 ^8 v5 h) l9 G0 S c
</ElCol>
7 N0 c' O* o( g+ ^. _: F
, h* d1 h/ [3 l# h/ C; s# j</el-row>
1 x5 r. k) w5 y. h% H+ N9 D) E% ]( P3 X5 T. S U$ b
<!-- Page split -->
: s# n# B1 W# e<br>! P3 @3 H3 l) R+ T
( C) ~& \6 n6 ]7 w<el-pagination background 7 p6 _$ |) N7 P/ z
:total="1000"" r4 G2 @: `4 i- {5 r# z+ R
layout="prev,pager,next">7 t8 `1 t% ^3 \
</el-pagination>
; Q/ H* `- b7 N9 g) A, ^8 ]2 f
8 @: G* M- i- I5 E$ U/ ~: }) Q6 w" }2 y" T ~
& e* t- c) l" C+ k7 l- z& U</div>6 x8 }3 w0 \& { o' d2 O
</template>
# J6 H' \4 f8 h! E- r
7 T3 a! V: t* h/ F I<script>
. w9 E; g A' [% j# t; q1 i+ F5 ~/ ~
" O0 }* b, S" j- Q! j1 N5 V; I- U! \export default {
, @! K4 A* K2 p) ^3 P; R' p( p name: 'app', C/ |2 O* m! p2 t+ P
data(){
! J, k. A/ t% N: ~/ k return {
" H; M+ w6 _/ G! U6 G5 H activeIndex: '2',' `3 R( k" U7 |' ^, N& U
url:"http://baidu.com",/ Z: c6 L7 ?! _; L- {: z
tableData: [{
. n p7 J! V" Z% F& C2 r date: '2016-05-02',0 w7 a% Z7 R) ]* p9 T% ?: R6 Y) H
name: '王小虎',# R: N+ `. C5 x7 M L% z# ~& c
address: '上海市普陀区金沙江路 1518 弄'; l8 P' `# C* r; U' }
}, {4 B2 l+ ~! P( z* q! k
date: '2016-05-04',
/ i6 D9 M, H* R1 i9 ~( W% ^ name: '王小虎',
# y6 @5 A6 N8 T6 j+ }6 X- b' S address: '上海市普陀区金沙江路 1517 弄'1 G2 \9 R; x; ]6 u1 Z& l
}, {
; u' U+ S# @* A' W3 B6 D* f date: '2016-05-01',
, T$ H Y0 i v$ e9 s2 P2 ^ name: '王小虎',. }- N3 X* I. }* r3 O- `" m& f* F
address: '上海市普陀区金沙江路 1519 弄'
5 D" U8 N5 S- w4 P( U3 W- r }, {1 b/ @4 a& N: m: ?' ]! \3 F
date: '2016-05-03',$ Y! ^3 f" s+ C8 D
name: '王小虎',
) A2 O6 O2 ^8 }# m address: '上海市普陀区金沙江路 1516 弄'' L+ _7 |' Q1 `4 V3 N8 u( l/ S
}]& {5 q" }# F0 u [6 a" ?
}% b0 Y6 }0 H2 {9 S
}
2 E- W5 R7 O$ X}. J& r1 j1 K1 K
</script>
6 y8 \# m6 W. A/ z- g
* N/ ^% K9 D2 ]<style>" y! L+ R0 G$ E8 w
#app {
' ~$ Q9 ` z$ c1 z font-family: Helvetica, sans-serif;/ h+ L0 W1 U2 f
text-align: center;
) T ]! t$ ]2 H+ U# ~% y0 H1 o2 V }
$ w9 u3 E' m; v9 L4 f, V- K/ w$ v</style>
9 h: x0 L9 a3 q8 l3 d/ ^1 R5 V
: M- {+ i: X. H7 s4 E) e. t8 k. O5 y0 q0 h ?# M
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
