|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习3 d9 R t# T" w* p {- ?0 g8 H1 q
9 ^* b( R4 v) [' v( D
0 w7 D7 O/ t" ?& w' g0 d& \# L9 K+ N" f3 w
<template>
5 o* f7 z6 c$ o+ m9 N <div id="app">
% W! X" j. I7 B9 ? <!-- nav -->& q; j. X: e4 l- k7 G2 d3 z- i* Z% ]' }, G
<el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
9 @( I. f0 J5 ~- \1 z G' E background-color="#545c64"
- v6 A& \* @1 U; {0 @" q text-color="#fff"
/ Y2 ~. W; P' e/ \ active-text-color="#ffd04b"8 U- F% F. s+ y7 h L- P4 n0 d
menu-trigger="hover">
6 V# ]. T7 R* C* Q8 o' A3 M <el-menu-item index="1">Data View</el-menu-item>
G. X0 b; k, } U j: ^, Y <el-submenu index="2">
% I# P& |) Q2 D0 y" ?* y* U <template slot="title">Data XX</template>
0 L a. O# h# L <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>* i) s/ O/ C C0 P, y6 i4 p
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>& `& g0 c. K! D# |- K; s
<ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
w6 C, u: I9 j8 l <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
! M' W7 ?) G" l, U, o6 i </el-submenu>
+ m) O% ?$ o( { <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>( \& Y$ \% ?$ K" i' U
</el-menu>
" j Z9 c: e6 X- h* x& P4 s' T
3 B4 ]) C6 G+ [
- ?2 |7 P! z, z9 n/ R <!-- search -->& h, w# s) L4 {5 h
<br>0 v# f( u# B# T) N4 W
<el-row>
2 u9 [, Q& q2 r3 K3 |" q% B <ElCol :span="6" class="grid">6 b# L* X3 J% }
<el-input v-model="input" placeholder="please input the value" ></el-input>
2 m5 X# q- R9 C x </ElCol>
' b5 x$ c1 F. n) j3 q <ElCol :span="2" class="grid">
6 F8 j- Z8 h3 f+ _# a2 S <el-button type="success" icon="el-icon-search" >Search</el-button>
3 x( H: _. r* b6 C: P </ElCol>
( j0 V( d) V4 k+ L</el-row>
/ c$ [, ^. q1 ^1 z2 \3 D, v <br>
$ x( M8 V$ w! {9 \7 _
, U5 {& `( z% \- F% D8 f2 q0 i: s<!-- table and operations -->% W- ]# M8 Q1 m0 Z5 V, {
<el-table
5 s" Y5 g' `6 a* }:data="tableData"
$ C* j# j% K1 u$ ]! nstyle="width:100%"7 a$ n) i9 z; `) I
stripe
4 P( ?% u% T' c+ N, z. B>
1 Y1 b) G5 e8 `$ a8 J<el-table-column fixed label="Date" prop="date"></el-table-column>
+ v* U# N, y. {! C* w2 }7 O' C<el-table-column label="Name" prop="name"></el-table-column>
1 v" S; U) R7 i1 Q+ x<el-table-column label="Address" prop="address"></el-table-column>
- L* D/ }2 w- c* G, Y<el-table-column align="right">
K3 n' f$ Y g# B; Z" N<template slot="header">
( N# V1 P3 p7 g/ n9 D& }; U <el-input v-model="search" placeholder="please input the keywords"></el-input>; R; j* p+ ~* v: a% v* @' |# Q
</template>
0 \+ x0 s7 H9 W+ R% J! i+ y</el-table-column>2 Y3 P7 l& Z3 J2 y) m
3 ^! o9 K2 N( u8 v+ s- l0 h<el-table-column>
' F" b' D5 Z* W5 B<template >) k: z8 n" U6 o8 H6 L4 r! a
<el-button type="primary" icon="el-icon-edit">Edit</el-button>; l% W9 a ^' `! q: ~$ T# Q
<el-button type="danger" icon="el-icon-delete">Delete</el-button>4 n5 v# D& |3 Z% }# `; O l2 S: h
</template>3 ]% L9 P5 W# D/ l
</el-table-column>: I2 t; U: t4 ^" d5 ]( I% ?* E2 O. a
</el-table>
% H" I" |1 w' r9 D1 W$ n5 `
6 F" a: n" B9 J+ v. H<br> I; Y; L" M5 f5 p* v* H. Q
<!-- Add new buttons -->. V8 h f; t! f- v+ S% L5 z k, _
<el-row>3 [# {+ f, s' s7 U
<ElCol :span="1" class="grid">3 `) i) V% c; D* r p0 Q
<el-tooltip effect="dark" content="Add new information" placement="top-start">
8 ]9 h; G" P N2 U# [ <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
$ n N/ T6 E9 o8 R </el-tooltip>, N+ A' S; u+ ^) X8 d
</ElCol>9 j% ^8 H8 U n8 K: B5 W$ o
3 B; z7 u& A( y- k: w
<ElCol :span="1" :offset="1" class="grid">5 Q6 w$ S: U0 v1 a6 N
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">7 X+ d# [: v! U% z+ {
<el-button type="danger" icon="el-icon-delete">Delete All</el-button>
" \0 U3 ^4 Z8 K& a( P8 L& I* @ </el-tooltip>1 ]2 a6 O5 p x
</ElCol>
6 S( W: P+ x# K. k% b7 f0 n4 p* g; Q/ a& G) U. B( k3 C" v
</el-row>- N2 m- R# x9 p4 P! y% j% L! V
& u$ a0 @) s- T2 r3 g
<!-- Page split -->
' a. G& s& r; n" R<br>
( i) C9 o) x8 `0 T4 U
' O/ [4 B4 G& D( [$ ~<el-pagination background 5 ~% `4 }0 S" K; E% V+ t
:total="1000"
0 J1 h6 f6 k, _9 a layout="prev,pager,next">( h+ y9 Z- V, d8 G$ R: r0 b, E5 [8 a
</el-pagination>2 R4 D& a" V8 B) M) q- v' E
( ~& s0 j$ `3 X0 _2 C }5 f$ Z! V4 m1 H( t' d
5 N9 U3 E0 d6 v6 y1 ]
</div>: r& B( d* m+ d: T& W
</template>
5 ]# B# r6 _+ }0 N5 u! r# o& @) K. P. O9 b' A! @) g6 e
<script>7 @' J( X8 g0 F( Y4 o
& e- P! j8 [. q: K1 ?export default {
4 B- E$ ^ B0 S) C v' n name: 'app',
" P+ i2 N: F/ g! H: U data(){2 X. P! l* O" A0 x {) b
return {* _+ B! A! `# E% P6 P; R6 E+ S- r9 h
activeIndex: '2',; Q) @- o f# Q' ~
url:"http://baidu.com",' j* d' [5 R; T8 T% O V
tableData: [{* h1 \. |: @ t6 P; d' F7 o) h
date: '2016-05-02',
0 Q2 M" z% ^2 \ name: '王小虎',
7 \2 [/ M- z( u: z% Z address: '上海市普陀区金沙江路 1518 弄' v6 C8 p2 C8 K( q4 s
}, {. J! v+ c! {" w8 ~
date: '2016-05-04',9 ] t6 U- ?% T. [/ c5 r. c
name: '王小虎',, y* B$ S6 { d2 \) f
address: '上海市普陀区金沙江路 1517 弄'
, a) x5 y6 r0 ~8 c! h3 r! M2 _ }, {
0 A. ]% ]( ^& B4 `8 q- k- C* b) U date: '2016-05-01',
4 \* z" ^, X; o5 H* m3 H T ~ name: '王小虎',. b5 F" m' r' v, J9 m
address: '上海市普陀区金沙江路 1519 弄': m7 s& [1 P* R+ r& @( g
}, {
^6 j7 y, T& x: w date: '2016-05-03',
3 b& x' ? k4 y1 o4 h5 u7 z% F name: '王小虎',8 M. k( Y7 Y1 @& m; I; N
address: '上海市普陀区金沙江路 1516 弄'' T7 p- s. {3 B' c' p0 W4 R: v. R8 E
}]0 T' \! [7 ^' H; m* f( R
}
0 \* M- S! V2 U' m& a' k7 e8 E8 w8 _ } m- k2 s7 G: v- _( u2 v
}
8 b2 Z; _5 z& X/ P( @</script>0 l5 ^0 S* c$ S
7 x1 L/ I+ S& }) J1 b3 L/ C$ U
<style>) Q9 K0 |! R% J* Z. f) Q/ R
#app {& E; J, `4 F/ U. |0 ]- W. T
font-family: Helvetica, sans-serif;5 [3 h( D$ A+ z8 r7 }1 F# d i! C
text-align: center;4 w, S+ w1 s! K; X( O6 s1 l# i
}
! \* r" U" [: _7 D4 a& P0 {/ \</style>4 k) [, z' Q2 N! c W; P7 p/ K
7 n3 t* F) n9 D" }4 `0 f) y: f6 u$ G q8 x4 |: @
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
