|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习! f1 P0 s( M/ E, m/ E
2 V8 ?& X' A, _
: ]+ N; q0 U3 [( \+ Z! B
# D8 M+ O" t5 N8 x: u# V x<template>
t! ~( q& `, @9 W. H _! B <div id="app">* q" a4 G$ C1 t' d3 S9 s. n% g+ p
<!-- nav -->
- H) @6 M6 j# \- a T. V <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
! k M) H$ m y/ T- j: K/ _2 O background-color="#545c64"
" c5 {; c+ z3 r$ B3 d g! { text-color="#fff"
8 T: \2 Y* l$ \/ k7 z% H active-text-color="#ffd04b"& g, c. y9 g* B8 P; }) g1 n9 ]
menu-trigger="hover">
3 T3 ~+ `1 |! _+ C; p0 Y <el-menu-item index="1">Data View</el-menu-item>& }. H- H& v3 u. o. a
<el-submenu index="2">4 ?* X/ Y% R+ K1 G$ C# T
<template slot="title">Data XX</template>+ q1 s% _& L6 r, [) _
<ElMenuItem index="2-1">TC Data Collection</ElMenuItem>/ Y/ b1 t$ F3 }1 |, q: ?" u7 y
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>" ~5 K) O! f) C3 b- E4 l
<ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
+ W- t, x$ V; y6 R# d5 N! j: t <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
* t ^' ?* C- d" q" a </el-submenu>6 Q, o! {& S, M6 \
<el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
6 g* y- k" f; q9 N7 n/ ^) q9 y( s </el-menu> k7 p0 e- i0 a4 e0 q, R, ~
$ O8 J+ X' ?# o. _# t( b. A
: ~, G I3 h( ?! g& f! M6 W: P
<!-- search -->8 |( W/ s4 `2 Y: Q2 a
<br>0 B1 C, {& ~0 P# t
<el-row>
0 x% g0 g$ N+ _6 U5 C) x- Q <ElCol :span="6" class="grid">
2 i1 ]7 _! }+ p <el-input v-model="input" placeholder="please input the value" ></el-input>, r# `5 e7 b8 i/ B' ]" X* B
</ElCol>
' b4 y5 {) ] B) E' A4 X. Q. q <ElCol :span="2" class="grid">
/ F8 }1 Y' M6 j/ w% s6 @2 ~7 L. Y8 b <el-button type="success" icon="el-icon-search" >Search</el-button>
7 k8 V. }1 l7 W5 @) M </ElCol>
6 T* p4 g. D' h. q4 U, U- T</el-row>6 L* Z( s) h6 _" U$ ? M
<br>) D1 E S4 k+ M* h
; o7 |6 w+ i- v; R
<!-- table and operations -->
$ s; K! [, t# Z" W0 i<el-table ! e# _0 \& c' J7 _, M4 e& I3 z
:data="tableData"& Y5 l! I& N$ Q3 a/ n3 i; d
style="width:100%"
. D& @& ]0 d6 \stripe
+ Z* ~1 a( n' G, f1 N>
B% O3 R; U8 |# @, \+ \+ m3 n, ?<el-table-column fixed label="Date" prop="date"></el-table-column>' W8 }* p$ [" l/ D
<el-table-column label="Name" prop="name"></el-table-column>
. [" ?5 E- W0 N- A. P<el-table-column label="Address" prop="address"></el-table-column>" X4 V z# d2 F
<el-table-column align="right">$ `. ^: A p& G
<template slot="header">
# q6 X/ P7 J( t2 Y' t <el-input v-model="search" placeholder="please input the keywords"></el-input>$ O6 B( K$ W' h
</template>9 n( W: |1 _# f% ^- `# g
</el-table-column>
2 d% H( B, l% r% v$ V. x+ l. V
: t0 s! ^: B0 k+ Q3 m<el-table-column>
/ c1 Q1 ^& y* p- Y<template >8 B& q3 m, R" H
<el-button type="primary" icon="el-icon-edit">Edit</el-button>
% X6 M5 }: X) n <el-button type="danger" icon="el-icon-delete">Delete</el-button>
8 k# L: q: H# ? K L</template>
8 D% q9 q. S: H& X" d</el-table-column>
0 d( ?' f- }9 C( a7 h) {</el-table>
9 y! I7 p% G( k$ k$ N: i$ [% ^' _- T- U- y4 F1 S+ l
<br>0 H; u$ E w. x, J
<!-- Add new buttons -->
+ d" `0 {8 e( M9 v, Y D' t8 T<el-row>
+ d9 i2 c" H' p4 I7 w <ElCol :span="1" class="grid">
5 P8 G( w* K: r' t! Y+ `2 R- Z <el-tooltip effect="dark" content="Add new information" placement="top-start">, B9 Q5 A9 {& k8 @
<el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>/ q' `8 E+ i3 f
</el-tooltip>
. k! y& y( ^$ ]. W0 z </ElCol>; G1 F$ K) f! s$ `* j2 g1 _8 U
4 {) _4 P. ~( u <ElCol :span="1" :offset="1" class="grid">
; `0 H' v4 x) {7 s9 G, W3 R, s9 h <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
# l2 ^/ ~; [1 u& r/ o <el-button type="danger" icon="el-icon-delete">Delete All</el-button>
4 [# I6 \; r9 m8 M& k </el-tooltip>7 N; z3 g" d1 ?4 _7 [
</ElCol>8 a- X K+ q! ]: m& W
; l: t5 z8 U/ O
</el-row>1 h7 ?. z+ Q2 D
; }0 P' \9 Z# s- P
<!-- Page split -->- g; U6 [, G" Y# S! j3 {% L; R
<br>' {5 T2 K" F/ i# y
0 @* x2 C Y5 ^1 E5 F
<el-pagination background ' O) D) c1 I) c) u
:total="1000"
. J) M2 ]( {0 e' e! w" [ layout="prev,pager,next">
! s3 K) T/ `- w. T4 d</el-pagination>9 \ [# v% D, s! i+ e, y( W5 B' E0 u1 ^
7 ~# D7 @5 _7 e( J) z3 j8 G6 [, [, }# k- o2 _
% L0 [, _$ |6 n' T1 S</div>6 P" B' Q! Z6 |
</template>( M' k8 V t' c( G; M; f7 m' z' x
1 j# b l3 }' O* @4 n: c& b
<script>( s* J- N- s4 O7 ^# j! O s
& J# U" h. O6 t; Z- k7 v
export default {( Z$ S. q: O# n
name: 'app',
& P2 k9 `+ P" s0 z9 s data(){
0 U& k* X4 Z6 T return {
/ J0 c0 z" v; O8 U7 V2 _. ]. O3 O: u( h activeIndex: '2',! B7 Y* ?; W; Q
url:"http://baidu.com",7 P2 [# w7 ?, q6 A7 h( b8 V
tableData: [{" v0 ]9 G/ l2 u! x
date: '2016-05-02',5 o, d2 Z( g: O d
name: '王小虎',
0 B5 E5 v& d) B5 S8 j3 F. _ address: '上海市普陀区金沙江路 1518 弄'
! `( t* }& F! U1 ]* u( l0 Z- {4 @ }, {
' {0 j; P! [0 y6 L ?9 [, V date: '2016-05-04',
& e# |' n: Z& a name: '王小虎',/ G" k: R" Q' c1 _" B
address: '上海市普陀区金沙江路 1517 弄') {, d# `0 f# R0 r1 U
}, {, ?+ r E0 r7 I. ]8 ]) c3 M, @
date: '2016-05-01',: P6 l/ \. f# T
name: '王小虎',
1 t, V4 o% H+ U J address: '上海市普陀区金沙江路 1519 弄'* V) u9 f6 e# Y7 o( j$ B
}, {
9 U6 d n0 H& I6 _1 l6 t date: '2016-05-03',' ]7 \( d% B% R
name: '王小虎',; U( M# K' Z ~, V
address: '上海市普陀区金沙江路 1516 弄'
- }& a H( J- q }]8 o% ?( A! c0 \! ]. s
}
/ m0 x- ]. ]3 _- E, v3 L4 E# f }
" _1 g: d: \$ g/ M}
9 m, w9 S- K0 v1 V# X# z6 c/ `</script>; y( a ?8 `+ W: a
+ V3 h7 u! z# B# P- u<style>
1 |( u- p& q' I7 d$ r3 C #app {' y) V }- x5 z6 D3 s
font-family: Helvetica, sans-serif;7 ]1 c: e" r/ M" P" f9 Q
text-align: center;! z4 B" w" M. Y# q
}: c; T2 Z+ T% O3 p5 i
</style>
" P, V' {4 e4 {2 |
- }3 Q" e6 q) g. }2 t, I$ z6 ~% [, q3 e9 X+ b) U0 C/ T [
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
