|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习
/ u4 a3 K9 z) L: u d4 i! n9 c5 A6 W ?7 ?9 ?
, Y' s- H2 H1 N! K: ]2 S+ A( \
) K5 ]5 C8 P/ K& ^+ t+ W q$ `<template>1 A$ N3 Q7 e4 \8 J. X8 A# H3 Z; U
<div id="app">8 Z/ e- T+ T; y0 U0 l7 Q! l
<!-- nav -->, p9 G4 G! b0 J k
<el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo" & F5 v) e) m, M; _( H) O
background-color="#545c64"$ a) J7 [: [! e5 t7 _7 r. n
text-color="#fff"
* `& \5 `/ j3 i4 j! z active-text-color="#ffd04b"* H% A+ m/ ]/ G: C) e% Q; d1 m
menu-trigger="hover">3 F2 |6 `0 \' N R, U/ {
<el-menu-item index="1">Data View</el-menu-item>' H. C6 N1 |) L3 i- U" f- q: b
<el-submenu index="2">$ d) p1 m1 ~: Q* r" K9 g" X$ {9 V
<template slot="title">Data XX</template>
5 n# r) l l( m; M% p' \ <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>7 H# B) j1 O4 t7 `+ N$ H5 u& s
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
, y. `3 O3 r Z <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
" t8 C! A! N' |7 \. e6 v <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>* I! e# [/ j1 a
</el-submenu>& n) l' F |5 B% s- l! @7 m
<el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>' e& H4 y$ }7 U% e
</el-menu>
) d8 V! S9 s& r7 T$ @
! M- M+ u8 G( {. `5 O S, J& t0 t" F6 C- T) i
<!-- search -->
! n' x6 ?) ]3 E3 l <br>0 P4 A% b1 t4 Q+ h& z2 c
<el-row>
# H9 c. T7 W. x5 U <ElCol :span="6" class="grid">9 e# b! T) s- j2 r' M8 l
<el-input v-model="input" placeholder="please input the value" ></el-input>. r! `+ K+ K' J& D9 ~- |
</ElCol>' _% h6 d" s: D8 U& b t
<ElCol :span="2" class="grid">
$ G" X8 U; r5 X& f; _: m <el-button type="success" icon="el-icon-search" >Search</el-button>
" l8 m1 |( Y9 d2 c- V </ElCol>
2 O$ V' J) i- j9 \) W3 y</el-row>$ Q( h, T1 H& E0 `
<br>
, j# f6 r2 f2 ]+ m
% B% }- Y2 `/ F% D% g8 Q0 @<!-- table and operations -->. g. D8 u1 ^) b$ {% M2 e
<el-table & T3 e3 _+ W6 H, v D
:data="tableData"
& D B1 _/ D# _9 nstyle="width:100%"
3 K) T; L% A+ F6 `" [+ qstripe
4 E4 ]: K8 l7 B$ o7 D>* B6 h/ q. t' ?) ?2 n" k& E
<el-table-column fixed label="Date" prop="date"></el-table-column>" \. _! Y# D3 l: }
<el-table-column label="Name" prop="name"></el-table-column>, h' q# @& k1 f; b" \3 {- L/ S; e) |& R
<el-table-column label="Address" prop="address"></el-table-column>
' ^+ s) o1 d% L% B* ~<el-table-column align="right">
3 e$ F: Y! y, N" Q- I' d# ^; u# `<template slot="header">
] {- h" A% X9 K1 t <el-input v-model="search" placeholder="please input the keywords"></el-input>' f1 K/ r7 p3 R& u- h
</template>
$ z* m% A9 c. A0 P* ~* e7 A</el-table-column>6 U {$ K+ v. }4 }
% w+ f, f8 L. i8 d3 v
<el-table-column>! f5 ?8 o2 a% e; t0 c4 o# \
<template >6 }% u) Z, V. d8 |
<el-button type="primary" icon="el-icon-edit">Edit</el-button>5 m2 g& Z5 ] Y- {. l0 w
<el-button type="danger" icon="el-icon-delete">Delete</el-button>& K& n- m+ p) @% D' E) M4 M
</template> y0 l: I5 @- u- q
</el-table-column>
8 q" i2 B( }5 X</el-table>% @( D9 s( P. W1 L4 F; L) \& J2 R
2 k6 l2 |, q% I2 ?' U
<br>
( [; N5 ~, j3 K<!-- Add new buttons -->& L7 G8 | \5 F8 o; l8 K; ]
<el-row>: |( T# Q: E- y: k" J# k1 Y8 p ?
<ElCol :span="1" class="grid">
& O2 O( T7 D! F. P7 O8 l <el-tooltip effect="dark" content="Add new information" placement="top-start">! L7 q8 N$ {7 r4 S( F5 K$ \
<el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
8 T" d) b1 E& Z0 f8 S" Y7 m </el-tooltip>
! D f2 ?' o9 G! O9 l2 s </ElCol>! L7 Y1 `2 x* \ ?/ X* I
6 u5 n3 P# {& K' ?, R" {, y
<ElCol :span="1" :offset="1" class="grid">. I# n- \) Z7 m( e5 D$ v8 E! u& d, X
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">- T! q8 U% h. B# W. k
<el-button type="danger" icon="el-icon-delete">Delete All</el-button>
+ n9 c* S$ e$ ?/ e" c/ o </el-tooltip>
3 ` K. ^$ q2 T$ H </ElCol>2 `9 F. p1 V& w: Z# E
6 L3 M6 s+ S& @8 w( T
</el-row>/ y: ?6 c) q) x% f: V8 m, M
/ ~5 f0 r5 p! B8 ]) K @# ^1 W4 {2 C
<!-- Page split -->
/ a9 A b i. ?' ?<br>/ U+ A$ Q( L7 v5 a6 E) |- M
; _, m1 H5 P3 H: D<el-pagination background 1 z9 q) O) B. t
:total="1000"
1 ^# X8 g( v ]2 S L# u: c layout="prev,pager,next">% P3 M, l/ {2 B$ q
</el-pagination>
! S0 \5 B$ ~* C6 [/ E" y5 D; Z& z) Y6 T, s
% w l% P H2 W
' I T4 M% D$ p9 i3 d</div>
5 @: n. M: f6 A) v( I5 z6 c</template>- s( Y7 ]/ }, W; D2 B
( G2 M4 M9 v6 j! {1 }
<script>
8 I7 V2 h4 j u) j( V" r2 q# r: B/ w+ g o) j8 g5 `
export default {/ b/ _' ?' q) I/ e) D( _$ G* K
name: 'app',
" i9 |5 p8 I; H6 }& V% R+ I; O data(){
: b9 z) o" \! x& f# ^ return {' f# f8 R) W8 h
activeIndex: '2',
0 v$ b! ^$ e% i6 Y url:"http://baidu.com",7 }: C$ Z7 F; q3 a4 ]* @( c
tableData: [{
0 s1 _4 x) ~6 M$ |/ K4 O$ C date: '2016-05-02',
& s" e$ K# _2 G name: '王小虎',) _' @ _# _' Y! p! W; _" F
address: '上海市普陀区金沙江路 1518 弄'
* o+ l9 v+ i% W) F }, {
* w5 _" P" p% J) K( n3 q date: '2016-05-04',
, l/ `: ]6 H: `) j name: '王小虎',
c; c6 G0 `' V: m$ m address: '上海市普陀区金沙江路 1517 弄'
7 N' \+ H0 y; ?8 L2 U }, {
7 G- y$ X+ P- S' u date: '2016-05-01',4 m; I# z5 c' [8 S! U
name: '王小虎',% c+ s( c$ r; k* f# i0 u
address: '上海市普陀区金沙江路 1519 弄'
! U0 N" v+ |, W, D% o# r8 H( C }, {4 h8 `9 ^1 ^) _' l
date: '2016-05-03',2 E5 a! c8 b7 D# b7 D& [5 N* P0 {
name: '王小虎',0 z3 w0 A- B2 y
address: '上海市普陀区金沙江路 1516 弄', m: o U/ T8 ?7 Y9 w
}]
7 t. u( D! w) ^: Q2 U+ Z) {5 L }9 P: t! b$ O3 y
}
" K7 c9 M3 z! b F. a}4 N$ t1 n+ ~# m
</script>
" ~* |- \7 s/ S7 t+ M( N
$ m7 {7 b+ x$ `' h: i8 f( G3 ~<style>
$ Q/ u2 j5 D8 g3 \/ d6 o9 O #app {' f2 S1 Q! _: R% K% ~5 V: b
font-family: Helvetica, sans-serif;# s0 U" W8 ^6 M$ }# c
text-align: center;
' L" u% P1 ?, V: R }( Z5 Z4 @% x: p% C# K; Q& |
</style>
: Z- W) W4 p! ^, T( z6 z; z. L$ E) K5 ^3 ]
$ f5 t( s) e5 ?+ k a/ Y
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
