|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习
( L4 \& n# r/ ^
* H. d' c: ~: G* s+ Y
* x0 J6 x. Y/ f) v0 [/ H" }. ?( e2 v7 @3 c
<template>+ S" z- [: A u' R- o
<div id="app">
- y( i% N& ?+ O; P& ? <!-- nav -->
+ | ^5 _( _/ t8 z: h1 o0 c7 Y6 F/ Z <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo" . d9 _" U0 t: r; l. S$ c- j
background-color="#545c64"* j" o3 x2 p6 E1 ~! d
text-color="#fff"
- K% a6 D/ {9 f( X active-text-color="#ffd04b"
9 c/ A0 B' h% V4 T) j' ` menu-trigger="hover">
: ]3 a" @& W! A# i <el-menu-item index="1">Data View</el-menu-item>
9 O" m% l+ V3 _6 R, }0 h <el-submenu index="2">, P4 Q0 K9 f" h
<template slot="title">Data XX</template>
9 }( M! H% H3 x, p; c <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>2 [ I G, K! _
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
4 Y x0 ~! r; g <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>$ t& u' E5 i: b4 j2 T
<ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
* }, R! r/ }7 P </el-submenu>
' |$ J$ k. q: | W <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>( k% [% j; P- f/ f# z, f
</el-menu>
: i) S6 E4 Q- w& q2 k2 L! e7 k
$ Z; @( e% D# j: @+ a% C$ b6 r; m
* O6 d7 t5 ^. Y4 _$ O0 `9 ? <!-- search -->( _% w1 {7 f; U9 a' q0 t( M1 l G9 ?
<br>
: D3 i; {, `2 N, n- i. C) r- ]<el-row>8 p5 t* {7 S. I/ ?( K/ P
<ElCol :span="6" class="grid">* M: o( E F: ^5 H% ?+ K, R4 i
<el-input v-model="input" placeholder="please input the value" ></el-input>7 m0 k" i. R+ t8 r) U
</ElCol>
b! w; S7 K' P. _- I) B6 ^5 K <ElCol :span="2" class="grid">; ?7 P; \) U! M+ W6 i
<el-button type="success" icon="el-icon-search" >Search</el-button>
# O! J: D. b& |; t: j </ElCol>
* |, M$ W1 h6 {2 h, L5 m2 ~% J</el-row>
' I+ T: C/ i% ?$ ]! G <br>
3 ~( G# D) {5 |; f0 K6 c1 z9 Z+ @( d# e* ?; ^8 L r
<!-- table and operations -->, N& c8 N/ s! P5 H7 D4 \
<el-table
4 N' o/ E8 h* S6 }9 |0 r7 j+ z:data="tableData": z J4 k$ r q6 \% V8 I
style="width:100%"
l" x o6 l" R- _9 ]1 Rstripe
1 X" K( n/ f. m# c& p( R>
) V0 I; N/ s$ S# n4 |- @<el-table-column fixed label="Date" prop="date"></el-table-column>
]+ o; x2 P$ O$ |' M$ ^% @<el-table-column label="Name" prop="name"></el-table-column>
# u4 s; c9 u% \& g4 U* V<el-table-column label="Address" prop="address"></el-table-column>$ e6 B N1 j4 D0 @; K
<el-table-column align="right">
& P7 x# g( E0 F) H1 Y<template slot="header">! T7 ]. ^7 x6 A! _# Z c
<el-input v-model="search" placeholder="please input the keywords"></el-input>
9 w( g, e8 m3 Y- _</template>
: f. b5 ]( {, S& ?6 l8 m</el-table-column>
4 C# k" ?' j) t( V
' x- |" f6 F3 h0 ~<el-table-column>2 H5 L2 k$ n9 \' E
<template >
: j, h! x6 q( `5 I <el-button type="primary" icon="el-icon-edit">Edit</el-button>
$ X! \' e9 M, }+ j( W( S9 u <el-button type="danger" icon="el-icon-delete">Delete</el-button>
* }1 x% P! e+ S# D/ L</template>
% F* \) E, X; S% C& P* `0 Y</el-table-column>
: D# S# Q% I) `8 t- Y/ _/ v. {" G2 d</el-table>
U$ V1 ]9 c# p; K7 P/ L- M$ _0 B& U" S% a+ R
<br>8 o1 q. k5 O$ j! Q9 N' N
<!-- Add new buttons -->
3 ]8 w" f; p% l8 I8 S$ S+ T" n7 e1 ^<el-row>8 F9 `& }2 M W; L! A: @2 ?: l+ A
<ElCol :span="1" class="grid">
! T# y; o" Q: s3 V, _ <el-tooltip effect="dark" content="Add new information" placement="top-start">
/ V* h# C) E) d& } <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>$ l% l! a# f- R& r: r, c: M
</el-tooltip>
7 @7 S6 y9 ]9 M8 u3 @3 U! { </ElCol>
' [" K. E% i. a8 f0 k
) ?+ v. S! Q$ P0 P6 c <ElCol :span="1" :offset="1" class="grid">
: J' c( B9 |, d$ s2 ~& |( \ <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">7 B1 s o0 m; `# V8 H( {" U$ ]' Y; L
<el-button type="danger" icon="el-icon-delete">Delete All</el-button>3 K0 I3 C# \' _3 W; h) E
</el-tooltip>" [$ q i% X. x& X [/ S
</ElCol>& ~ @; i0 W; ~: K# V: N- ~: ?0 }5 _- U
2 _ [% C9 n; Z0 Q0 b</el-row>3 g- C" j) e: W$ t$ b/ `8 N( ^
9 |5 g5 j4 J6 m: e
<!-- Page split -->
( I% i- b0 p0 v2 M& G+ b& q<br>
" N% M* {, q+ \. z
- W5 j, ^8 y1 |( y<el-pagination background
; G z; e& ~) W :total="1000"5 h0 u& L9 P! N, i
layout="prev,pager,next">
2 t8 _ ~* F+ W</el-pagination>
; ?2 G% `6 g$ s- C+ {7 p/ s# T/ T- E$ Q7 l, v. ^3 j, c$ `
& x7 d( g! ]+ S% z- Z
, X; |* f, |- k2 U+ k7 h0 ^
</div>8 A9 r% p( h* X8 u5 N2 y
</template>
3 K- ^ T8 ~9 O P8 p1 a/ m* }! ~( u5 O* O% D* t5 k( z
<script>0 H4 f$ n" ^0 |7 }4 _3 m i
4 |/ s, U; m. B& ?1 y/ S/ q5 Z& lexport default {- K1 G. r+ }' o3 C$ f0 i$ @8 Y1 |
name: 'app',6 M5 C& h/ \$ u: R
data(){6 B0 F3 I: @& L. U9 s; S& j
return {
' g T! d( k0 G) Q6 Y activeIndex: '2',( m; ^+ y: q) }, i
url:"http://baidu.com",8 U7 S+ S. ^9 I( N1 j
tableData: [{
# r' N. s5 a1 j5 ?' L date: '2016-05-02',( p( r& z! j1 A, y: H
name: '王小虎',
; ~6 J0 C1 Y! M% i; d address: '上海市普陀区金沙江路 1518 弄'6 K# V. b6 i1 W* [7 Y; X- ]$ w% ?8 C
}, {
) r- I- G. u1 T" L# m$ w date: '2016-05-04',
/ Y- T$ O( ?# r name: '王小虎',! g2 ?2 Z2 P( \3 G P8 F
address: '上海市普陀区金沙江路 1517 弄'2 Z, R; f: k1 ]7 k8 E& |3 W
}, {! G' u7 l( S5 o
date: '2016-05-01',
& v, T0 U. l8 i. i ` name: '王小虎',+ Q6 v5 W Z0 p5 _$ t6 b& }
address: '上海市普陀区金沙江路 1519 弄'7 W) ^% _+ X5 ~" ^" [/ _% c' t
}, { w$ _& ?, |3 n5 y. ^! S: s
date: '2016-05-03',
& S0 S! U6 P4 F/ a$ @; z9 L name: '王小虎',
5 V l3 Y1 R3 f6 u( F/ S# U+ T address: '上海市普陀区金沙江路 1516 弄'
* r- T# `; |2 p) L" y8 v8 V( I }] _) z+ S6 i/ a% j1 `. u
}
5 P+ [& D) D) L: V i) E }9 q3 I8 z! T0 O7 o
}$ F l* i4 f+ |4 U
</script>
! |) Y5 i7 F+ ^2 d( Z- Q% Q% q1 n3 ]1 I8 }, j) y) L
<style>& N& p) h' C4 ]- p$ o
#app {: h5 P V$ D$ Z2 z- }
font-family: Helvetica, sans-serif;# M3 e, p' D/ @: L4 ?
text-align: center;9 n2 U0 v4 r) @& k% b: R
}7 c: N# a8 W5 e+ g
</style>. o4 A$ d2 R4 P/ Y5 m
q5 S, v0 @# v; ]4 \9 O
* O% Y& T% V0 W5 ] l9 O |
|
|小黑屋|手机版|PLM之家-企业数字化转型工业软件学习平台
