|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习
. O) e9 ~* \) z
% V$ i- {7 j) Y0 {. k
) A7 v3 `: Y$ p/ U0 n; l& P4 K3 w1 T# q! m& y ] e
<template>- C* P, T" O. }" P% r( `! V
<div id="app">
3 A* e) [# ^! l" L$ G6 J <!-- nav -->
1 Y; Y/ b" J! U <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo" - G! L0 K4 F- T4 M' O$ L
background-color="#545c64", b2 m; g8 q5 J
text-color="#fff"
8 ]4 Q9 m8 F) x+ u( v active-text-color="#ffd04b"
3 M- |$ `/ ?0 g% j menu-trigger="hover">% R% D* O, P$ w0 ?$ j! E6 ^8 x+ T
<el-menu-item index="1">Data View</el-menu-item>' ]5 R( F, e8 q$ P8 [: P$ n3 a5 x
<el-submenu index="2">& }1 a; T% _1 Z
<template slot="title">Data XX</template>
7 `$ {5 p( b' c. d) R, t7 P <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>" L% n5 q- J6 }' o- R
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>2 L; N/ O7 \: A
<ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
8 ?2 s& U3 k& _) j! ^2 f' ~' S <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
( n, Z1 W7 J) G! @; i2 Q5 { </el-submenu>5 M4 ?2 S7 C2 O4 Z" E$ F& L
<el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
3 R. j ?* ^5 c5 B7 J </el-menu>6 _! o" c5 r: }8 K" i. u* m6 ]
( ~- M! X4 |5 x$ b0 R) b
" s( {, k8 F4 T
<!-- search -->' [7 W% j' f4 ]6 w3 q/ c+ S
<br>
8 ~( `) M8 g2 u4 T% O. s, i<el-row>9 y( }7 U1 }( w% A
<ElCol :span="6" class="grid">
- y; y4 ]! N8 m( P <el-input v-model="input" placeholder="please input the value" ></el-input># k4 v0 J7 t" r+ o( o
</ElCol>
9 e$ M- ]1 K S) u! l/ b <ElCol :span="2" class="grid">
v& q9 v, A1 `4 m* E' G <el-button type="success" icon="el-icon-search" >Search</el-button>/ I1 g# x" g) \6 N2 a. J* Y1 j
</ElCol># g- I2 c0 N; x! m, x2 O& u1 X9 I
</el-row>
' F# ~$ @& c$ B1 N' c9 {% w+ C7 d <br>
7 h4 Q: v& R2 \) J' j" i0 o- `6 ^. t6 }6 S1 s& y; \5 |0 ]
<!-- table and operations -->
) @+ D }- }! g0 @$ y* k* C' ]& I1 C<el-table 3 i; D2 ^5 `& v( N9 ?8 V
:data="tableData"# a# f, ]3 Y5 g; S* C8 _
style="width:100%"
4 g- ]+ F- z+ W- S5 O+ s$ mstripe6 x0 } |2 G& z& d4 F3 a: L
>) P3 Q+ {: l: P: i
<el-table-column fixed label="Date" prop="date"></el-table-column>
9 f6 v4 A: w; c! R<el-table-column label="Name" prop="name"></el-table-column>
4 i; O6 g6 \4 y( [2 k<el-table-column label="Address" prop="address"></el-table-column>' Y* j$ @ |8 D; y2 E3 R5 [- v
<el-table-column align="right">
, |% f1 |, i* i: l& X$ J5 [$ ~<template slot="header">
. Y6 [2 P+ d; e4 Q; r2 @5 t0 T# e8 X: R <el-input v-model="search" placeholder="please input the keywords"></el-input>! R% C1 c+ w# \' g9 L
</template>
( |) s D4 J% A5 Q( l! `</el-table-column>6 }8 r$ i- A% T3 y
A, Y! d! j e- t+ s) v* H
<el-table-column>
' n* N+ e N: K<template >
) b6 \6 z# Q( g3 ?. {9 j <el-button type="primary" icon="el-icon-edit">Edit</el-button>+ ]0 {- _, q( b! W% Y P
<el-button type="danger" icon="el-icon-delete">Delete</el-button>
( H/ y' p0 T' m2 e</template>
7 T, @! h; X. a7 M</el-table-column>
L+ X/ M8 E- b, v1 I* Q</el-table>0 D; R# @! P. ^* a' q3 c
% B! O/ m$ G, J. Z, e) s! }! G* f
<br>
/ d7 h! K8 \' W$ i" J2 z<!-- Add new buttons -->& N& x# `9 X+ i% Y( l- v K
<el-row>
0 ?1 d6 {( |' O <ElCol :span="1" class="grid">
' G% m4 D L1 a <el-tooltip effect="dark" content="Add new information" placement="top-start">8 K1 m/ T2 z% Y3 I! R) Z ~7 g" m
<el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>4 R$ ^9 w0 d& m% Z ~& a
</el-tooltip>
, A: J9 \" W- p3 P, k </ElCol>
: E2 O- t% \# c% F$ H( a+ \. N3 I& X9 m- z2 q2 v- J
<ElCol :span="1" :offset="1" class="grid">( T' V/ g( S4 F+ j+ \
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
2 Z# X- h9 q/ d1 e <el-button type="danger" icon="el-icon-delete">Delete All</el-button>: v6 k& |& O* B0 D
</el-tooltip>4 o& M D9 \' D& k
</ElCol>. ?- Z2 V9 T: I6 w8 k% I9 ?: R8 J
0 d! k1 d7 _9 B% O" d
</el-row>" h1 h4 c& P; b0 v9 c
. {5 p* I" [5 y y
<!-- Page split -->
1 l% w! R; ]( \$ Q% M# Z) ]<br>
3 a1 D; s$ M f
! t+ }) l Y$ h% O; w5 {5 v<el-pagination background
1 c9 N; ~! `+ d2 { :total="1000"
1 w: @9 j( l! D& n% k9 ~ layout="prev,pager,next"># Z! q+ L' o4 o1 @
</el-pagination>
. v z0 F$ `7 }& _5 B2 l( L: ^7 v k: v6 K3 R0 J/ U. p6 w$ n
6 [: f2 M6 H8 _: y6 h8 i. j9 U# e, Z2 o3 U" ^3 ?
</div>* q, F2 O! R' I) d# `1 |( R
</template>$ [4 ?' {5 d. c) X( i g1 y( b
6 N5 c1 {9 m( V) Z9 S" @6 g
<script>
0 ~" {$ A1 E1 t# ^# \; |8 ?: } g, Y9 t1 A* g. f+ {7 V
export default {
: L9 W' q+ o: e$ R% q5 i: \ name: 'app',
! p# T' o! J' A7 P4 s4 y$ o$ } data(){
! l( j: |1 g/ N9 D/ A" A1 e return {
4 `1 V) B+ d, u. s# _& z6 E0 k& v activeIndex: '2',6 F+ B, x _( W) }8 s& A
url:"http://baidu.com",
9 I5 e; {: C. a m2 } tableData: [{
3 n9 O+ p5 _9 [2 `1 v3 {) m/ t$ L date: '2016-05-02',
2 P. n `' m( t2 a; O1 L name: '王小虎',7 B- e; q9 N2 T ?, k7 d8 ]1 Z
address: '上海市普陀区金沙江路 1518 弄': q! D4 L; m- e; F
}, {
8 n4 }( C/ t" n, L# L# L date: '2016-05-04',, N1 y6 C5 j6 d# k
name: '王小虎',
8 g* T% p, p( U% s+ W! ]5 ]6 U: T address: '上海市普陀区金沙江路 1517 弄'( o9 o) Q5 [+ e# p$ n. }
}, {) L7 R: E* P9 t( U1 i E
date: '2016-05-01',
: \! @' y2 m- ~) ~0 W& t3 d5 L* w name: '王小虎',* J5 s6 j7 c; s9 ?( A0 g' L
address: '上海市普陀区金沙江路 1519 弄'
) ]9 Q6 ]3 w: W }, {, \7 Z( N# v5 T2 z. A: j
date: '2016-05-03',, o" z- s9 g! w. b/ ~9 s& M
name: '王小虎',4 T; R2 [; o2 y9 o$ G# s
address: '上海市普陀区金沙江路 1516 弄'6 G0 ~! T" _/ j9 x2 F2 J6 J
}]
8 b( }( U# k" f }# L( E* r; c, e( n/ G+ {* i
}" q0 C% O ]2 R* B: r/ J* @
}% z2 i' t" i6 E% j" E$ \
</script>+ ~5 | q/ ^1 s7 @- r. D
; Y' X& F* G6 ]: ~; j+ e% d<style>
5 `8 _- Y0 r8 x. h: O #app {
; @) U+ d3 x2 ^* C font-family: Helvetica, sans-serif;
6 b6 u# ?2 N" z$ d( H text-align: center;3 p- k& W1 E$ X, S+ M& i
}
6 \4 q m$ W4 Y9 z6 @</style>, R- [# B5 K7 g3 d
0 R4 J* k6 M8 c9 G8 ]8 K$ K' v% S
; U {. l+ {: [3 O% _9 r
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
