|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习3 t9 p/ N- f; K! X3 F* i) W
- d _' K6 M z4 G( s, }' E d' T& m
0 x! |+ V" B! @( _# Q7 @2 [- }9 O
<template>0 S3 X9 k5 N- N- l6 b) b
<div id="app">
& W% b( H* ^1 N; J9 s <!-- nav -->
o/ j. M' \: Y9 j <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
/ h, C4 Y L. X$ z4 z* ? background-color="#545c64"7 u6 O# I0 l* \) P4 t8 G8 w
text-color="#fff"6 m0 U9 h( q+ }2 j
active-text-color="#ffd04b"
$ L. @5 G+ u% A# e$ D! D; s7 V3 Q0 z menu-trigger="hover">5 [& i- p% U: C6 ~
<el-menu-item index="1">Data View</el-menu-item>
* f F9 D& D: [: R% S% L <el-submenu index="2">
- x0 k4 B2 T# S9 h8 O. l <template slot="title">Data XX</template>
* S& J+ K# @. R5 D <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>4 R5 p, `$ [1 U5 {% ?4 M' @
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
& N& }6 X( p6 _9 t6 U <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
! w$ `" [! ^- o <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>, Y6 G# R8 S- j2 b# Q0 _
</el-submenu>! P: q" t9 k/ g; t" _
<el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
, q) P, T u) E </el-menu>6 o% o+ R. h0 j( [+ t. I
' B7 \: ^3 W, k. M
% I/ X, J) H6 T* j* S <!-- search -->! ~ Q! r$ e6 Q3 Q# V$ F
<br>
) u; f9 Z9 t+ q( z, e<el-row>
, k2 ?6 l9 y% W" h) X7 G0 A <ElCol :span="6" class="grid"> g u' |# o( i7 g5 E, I2 ?
<el-input v-model="input" placeholder="please input the value" ></el-input>
0 W7 e" s! k/ {4 I/ U1 ?* ~% {, o </ElCol>
9 {" S4 v9 a$ @: n' Y7 ~. b <ElCol :span="2" class="grid">' l( n) ]) q2 Y" T/ X. B6 q1 e
<el-button type="success" icon="el-icon-search" >Search</el-button>
/ H6 t/ h$ b: H: y </ElCol>
* y" i' c0 [. `4 ^5 U( O2 Z% ~7 ~</el-row>7 _& u, y2 R. b$ H( q( Q
<br>0 h" j7 r8 [- I- C' f/ r+ u+ }8 W4 F
( h$ n/ p7 f$ M! | D" j5 o6 J<!-- table and operations -->
& N {$ C! N, N5 u3 E<el-table " Z8 k; S$ {- G% M0 i7 y0 H
:data="tableData"
0 n0 H) W( ~$ `$ }. Y1 kstyle="width:100%"( N" q$ ?; S Z7 l, x, N
stripe
" x& m) v2 W# l>- |! |) s% u' b
<el-table-column fixed label="Date" prop="date"></el-table-column>
: L, m9 ?1 w! O3 X3 p8 E<el-table-column label="Name" prop="name"></el-table-column>! s. X/ Q( ?% Z J
<el-table-column label="Address" prop="address"></el-table-column>
/ H" _3 T6 W$ G1 T<el-table-column align="right">6 X& l+ m6 k* P* k4 m! Z) Y/ O
<template slot="header">+ M* L! c! f9 y. G8 w# j( A4 ^; `( F8 q
<el-input v-model="search" placeholder="please input the keywords"></el-input>. ?- T F0 ^9 K" V2 Y3 w$ F" U
</template>) j0 Z4 U' W# c" E
</el-table-column> q; e* B9 L$ T2 \# ?) i
! c. H: D' |. y' |8 j% \$ _
<el-table-column>* ?# g$ L# u9 C5 l$ p# z5 v; E1 c
<template >
; f. B: F8 e7 n0 q: f/ L' D& K <el-button type="primary" icon="el-icon-edit">Edit</el-button>
1 M) o- |% M: Q' _) P <el-button type="danger" icon="el-icon-delete">Delete</el-button>: g5 I1 x% O+ C- [
</template>, h# U& s% X, Q* w
</el-table-column>
4 N' f7 \7 q5 @! _9 n</el-table>
$ E6 S- @: h! O$ a2 I2 s: S6 A2 |) i( T8 S2 M, ]
<br>
* j4 v- _1 B n' p& P W9 z/ o<!-- Add new buttons -->" D2 B' j& E0 a3 s, O) I: ?" |
<el-row>
( o& X4 h9 a8 W# w5 D <ElCol :span="1" class="grid">( o& o8 }8 j" [/ J& i5 U- p
<el-tooltip effect="dark" content="Add new information" placement="top-start">+ i, h6 W& E+ V
<el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
# r7 F) U$ R1 h3 D% V% i </el-tooltip>
7 c# e7 ^: H2 b9 | </ElCol>
\( A1 N1 A7 Q! p6 l- m; v: I3 C4 H9 r0 c- R, M# Z# _+ [; o
<ElCol :span="1" :offset="1" class="grid">
. N) e8 o6 r: m1 w0 t <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">' F. p M+ G! d# V0 T- B( W& C
<el-button type="danger" icon="el-icon-delete">Delete All</el-button>
6 n; K L9 {2 Z7 E7 d! Z </el-tooltip>4 |3 |* {& m. u4 ?
</ElCol>
" X( Z2 A% a1 R9 ]* t3 Q
9 z: t3 s D$ T: [' @' p) m7 c</el-row>
4 J- j! a/ P6 P/ y8 y0 P. ~0 [; W8 O! M4 h; \
<!-- Page split -->6 ` u$ J8 p5 j' H7 Y" H& H
<br>9 P& ^& l& l" s
) [. d$ G8 M B: y( k* ]( C1 a! ~
<el-pagination background . O# B$ z& Y- u1 q4 Y: ^
:total="1000"
9 g8 _. c! Q& X. E K+ B2 H% a layout="prev,pager,next">& j/ ~! Q4 J/ o
</el-pagination>
# ]/ ^. ?8 ~2 T) p2 W0 y: j& X. c: E9 X
0 _- h$ ?" } E$ G5 [( a+ K
* y8 L& i! R& Z" [- h
</div>
$ O& V+ G* G9 `. M" L</template>
7 C' r8 ]" u: B- {: _1 \: V1 n7 w" i2 _
<script>6 G; k3 v4 z9 R: N* R
- {2 s; {+ m6 E: r S0 Qexport default {
/ s/ z% W; @0 ] name: 'app',
# K6 U: o% k# c5 D8 r) A0 K) G data(){
5 j) @# n" V3 C/ j return {
6 _% v' T/ S" y/ l# B5 x activeIndex: '2',# {9 {8 s8 I" _3 f( m6 c1 N
url:"http://baidu.com",/ U8 K. e" W5 A" e% \+ E
tableData: [{
( I7 L* P; G9 G" W! f O date: '2016-05-02',* F+ ~1 N; O$ R9 d7 O
name: '王小虎',
% g# t5 E- l l5 ^2 z address: '上海市普陀区金沙江路 1518 弄'
0 k% a% v! b+ @3 T6 B; R( T% F }, {
$ u: S: D* e' k, @+ x& l date: '2016-05-04',
' p- I4 A1 `* o5 }. @2 P name: '王小虎',2 L' E9 }% i9 v& E5 i6 S% P8 M
address: '上海市普陀区金沙江路 1517 弄'
: ]0 I7 A5 O5 C/ ] }, {
& `# m+ U) x% u) ~ e( C3 j date: '2016-05-01',+ Q' ^0 i. o9 d" Z, Y
name: '王小虎',
e- h6 _ n( c8 Y6 p+ `; M. a& c' ~ address: '上海市普陀区金沙江路 1519 弄'
/ ?* C* Z/ H/ Y/ ]( S0 q }, {6 X$ Z! H6 @0 W
date: '2016-05-03',8 `# r( T$ T" f E t
name: '王小虎',
6 r3 {, |1 ]0 I! R4 A8 x address: '上海市普陀区金沙江路 1516 弄'
$ h& Y% | U& q$ Y6 a }]
/ n5 T6 }( k$ m. p U( w" R1 k }0 m. ^$ x% T" E8 l6 Z5 p
}. j' \ v/ I' F) v# V
}
) |3 s2 F5 Q" I</script>
# H% ]4 S) A9 f) ^; _
( a- {! }: ^5 O* C; J- Z. |<style>
2 z* @- P. y7 P2 [# S9 \" w #app {3 p' D( @3 ^' b8 _$ P. N4 v b
font-family: Helvetica, sans-serif;
7 Q2 X5 H- @- e( l2 e6 Q8 g text-align: center;
, O5 p$ O2 Q9 w3 `) C }; N$ S) f% m, A! Y" C! w# P
</style>- v1 K# y6 |& W) i5 `
, D% o2 `- V# w4 Q
+ M# z6 L% D" h+ X% g |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
