|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习) r4 q& ~3 S$ D! J$ B% D) J
/ o5 S# N, J0 K& J8 O) [- ~
" p& }$ _/ ~: z9 U" C+ i
0 c$ V7 w2 v/ ?' U9 m<template>. O2 {0 v; N7 H& }( w# }7 ^5 \
<div id="app">
3 }2 x* h; q8 t3 T <!-- nav -->
! _! j( C6 X& V4 G& w W% [; i <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo" , A: t* L0 ^) D; A1 ]: S' R, H( i
background-color="#545c64"5 Q( g+ C3 r4 h
text-color="#fff"
% t7 x. I) d3 c" I active-text-color="#ffd04b"- ^; x0 A: Y7 n7 t$ x2 z! ?
menu-trigger="hover">
; F7 s/ T% V. g, r: y0 a9 N <el-menu-item index="1">Data View</el-menu-item>
; `% N, W: S+ r& L) j4 D <el-submenu index="2">
& b8 z/ B9 k2 }; Q6 ^: d7 O( ? <template slot="title">Data XX</template>
4 M1 k& F u% m \- y0 b <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>7 c# O% r9 M6 T( |
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>5 e6 u# ]- }( `1 V1 v
<ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
) U8 e6 w9 o7 h- R( k! i" { <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
4 Z" ]: @' {/ ?4 L' W </el-submenu>/ t. o$ g' g- u, u+ {
<el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>! p/ S: d# a+ i! @3 g7 G
</el-menu>
5 U2 E2 m# m. ?" [
T) X, g# }( m6 J% K* Y8 G/ ]: m" L7 l, F ?7 k4 W$ S- h
<!-- search -->$ W' U% C+ Q: {7 q
<br>
% \$ M/ s$ [! F+ w<el-row>
; N. i; `( Y( w* X <ElCol :span="6" class="grid">
o& }5 ~; y$ D' Q <el-input v-model="input" placeholder="please input the value" ></el-input>
' L! A- s/ u, Y$ _2 C% v( ? </ElCol>
: {9 N$ b+ B! S: ?8 M" w2 f* e. q <ElCol :span="2" class="grid">5 e) c, O8 i* u
<el-button type="success" icon="el-icon-search" >Search</el-button>
' c4 k& k; ?% N$ C- m </ElCol>
7 g- O: E' c. }# @7 h& j- ?</el-row>! X/ P" Q/ f ?2 r5 P$ S( p
<br>
7 |9 ]! e; s# Z+ b
; Y# r1 E+ ?- v8 m+ o+ G# _( b<!-- table and operations -->5 a4 O& B, U* y* ^2 r* H8 \
<el-table
& q. G! l9 J; v: h:data="tableData"
( P! z* f6 P- o" @5 |9 \( z$ H! kstyle="width:100%"* l E V K5 O+ e/ p
stripe3 R- ?; D4 q8 p z) V
>( @0 n; O/ S. T" X6 s2 `1 v" S, ?- v
<el-table-column fixed label="Date" prop="date"></el-table-column>. G* @+ f) h+ K3 c [# o
<el-table-column label="Name" prop="name"></el-table-column>7 A R3 `$ c: u1 p
<el-table-column label="Address" prop="address"></el-table-column>5 {* G8 y2 Z# g' Q* n, l% n3 w3 S
<el-table-column align="right">
/ b8 C0 t7 B5 ^' Z<template slot="header">* m8 x0 r# R' a0 r5 T
<el-input v-model="search" placeholder="please input the keywords"></el-input>
% t$ c' M' g, C0 V</template>
: Q6 k3 q. f3 I: ^: U3 A2 `</el-table-column>
. k5 Q0 i$ W( K9 Q7 j) Z! D9 _2 }( c9 l- y6 v- r M; K) b( W7 f2 g1 _5 U& Y; |
<el-table-column>
/ S T3 {+ S% k4 Z& k9 C9 n<template >
' ?* _ ` k6 y <el-button type="primary" icon="el-icon-edit">Edit</el-button>% r. A+ e$ B* |0 v7 s
<el-button type="danger" icon="el-icon-delete">Delete</el-button>* G- P4 a0 x% ]6 m1 @9 R2 _
</template>
3 T% j- P4 R8 E4 ]$ ]' G7 c</el-table-column>) w5 x) a+ T) x
</el-table>
\* G( o; N7 I4 H
9 c$ {0 `8 X* t<br>
/ F0 T* [/ I, e$ X1 ]<!-- Add new buttons -->5 S% ^: P: G5 i/ H0 w
<el-row>
6 h: F0 R! _ q1 y# K# Q <ElCol :span="1" class="grid">* y |6 U+ ]$ G. ^! l2 C, [
<el-tooltip effect="dark" content="Add new information" placement="top-start">( Y. V g& r& j* }3 ?$ _& C
<el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
T C% Z: g5 s5 g$ e </el-tooltip>- ]$ ]2 o, \+ r: j9 q$ D; r
</ElCol>
) L, p2 m( h) q2 i) {) g" ?% y" e, U9 U
<ElCol :span="1" :offset="1" class="grid">' G! y$ q( K0 D5 a0 t
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
( ?7 u4 l G4 Q) ?' K <el-button type="danger" icon="el-icon-delete">Delete All</el-button>5 w( G- D5 _, M4 ^9 u* {
</el-tooltip>
T4 D; L2 g: R' N; H s </ElCol>+ u0 d/ k$ q0 @' y, i
" o. m0 q. ], A6 m& A. w* z</el-row>8 z) K0 C& C0 S
! T) }2 B4 y. R8 b8 k: c, P
<!-- Page split -->* c- {: e) Q! T3 E5 t
<br>
% F @5 L; A2 P8 n3 X
- u. N5 f5 U+ Q4 r5 u _8 z<el-pagination background
" R' w7 [6 L7 q8 U4 `7 G :total="1000"- O7 h3 U6 c7 v5 T+ L. A2 |
layout="prev,pager,next">
3 T+ p( O4 L. k& U/ P8 v3 v0 Q</el-pagination>
2 B% W0 J: E5 X% x, |2 m
~/ D( L: Y5 F- {* C2 a. j: @1 k$ J O l8 a. `* U# A
/ a# {0 _+ z7 j. l! G</div>
7 N) `! S5 p: N</template>
) M$ j8 M8 t% f/ ?; h% }6 ~+ e+ |7 L6 \. _1 d6 o3 x. J$ i0 |$ A$ b% j2 y' I+ g
<script>
4 F0 I4 R9 r; V5 F5 _+ t; w0 ?+ F% N) X t$ s
export default {
; r% O1 h h8 Q) p" } name: 'app',
( w7 P: q5 a4 s data(){
6 X$ _: Z6 x* ^3 \ return {: [4 n, n; D. M; v7 H) o
activeIndex: '2',
D3 I+ Y- C# @- v. y" g url:"http://baidu.com",
: s7 \/ Q" l8 V. G$ L tableData: [{
1 v% y. L5 U6 q/ j7 J: d( h date: '2016-05-02',- G' n1 |% ]) J: }
name: '王小虎',
, e+ ]( C- c" u8 r; c4 I: e address: '上海市普陀区金沙江路 1518 弄'0 D$ D* F& e6 [1 A; u
}, {
8 ]; }4 h" B. h# t! U5 E date: '2016-05-04',
5 c R6 V% X- Z+ a/ F name: '王小虎',
+ A. y' N" [ k! \ address: '上海市普陀区金沙江路 1517 弄'5 `/ z P! L# @1 o; \1 ]5 V. x+ y( _
}, {
( e9 H" V: e; T2 W date: '2016-05-01',+ R3 @) ^: }5 E
name: '王小虎',
" q. X+ w( y5 \ address: '上海市普陀区金沙江路 1519 弄'/ H) k$ W3 R7 y/ H- W
}, {
& j u! e6 r5 ?& h date: '2016-05-03',
7 G6 D) p6 ^: c! k+ W name: '王小虎',$ j+ x' h- O$ e
address: '上海市普陀区金沙江路 1516 弄'$ J5 F- q- e5 C$ p9 u% Y
}]) n2 z! r- f( j- }
}3 Z2 I$ v+ E7 c8 r
}3 H3 S& v( a& w9 l' J8 B( y X
}/ I# G2 O: C) h
</script>
9 f- ~: h8 }9 j7 n: y% L+ w* ~1 H# b9 Q9 K1 e4 N7 C% ?
<style>
0 v8 P- ?/ w( l2 b5 p #app {
6 O9 j( t w/ G$ L- | font-family: Helvetica, sans-serif;
( u& v& i5 A" c8 E ^7 y text-align: center;( _/ G; C9 C5 x
}/ _6 A- E% `* J* U) s- w
</style>0 S$ Q P$ }( Z2 }7 q
% \6 d0 t, B. L2 X) m; n8 _0 n$ N2 b; J
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
