|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习7 M) Z) C; m$ D. E) E) @
% U+ t3 h% E& s: I: p# p
% o+ A+ M$ m6 D ]
! y0 }5 {$ T! L: h1 J<template>, Y, E* u0 |5 h0 b
<div id="app">
- i; c9 f4 c" W2 c1 X5 o: h <!-- nav --># b4 M0 W; ` z# R$ v7 ?& f8 r J0 Q
<el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo" - F- P0 G2 [( i6 N3 ~
background-color="#545c64"1 C/ T% w' P( i$ I1 V
text-color="#fff"- L* c+ `% O/ r5 c
active-text-color="#ffd04b"8 T. p" `! q; H. C' f; v# {2 @
menu-trigger="hover">
9 S1 ~4 z9 A& t- `4 B <el-menu-item index="1">Data View</el-menu-item>
* X9 [8 m5 Z R) J; l7 S# N/ K! n <el-submenu index="2">
2 ]7 W. A Z9 R g( t <template slot="title">Data XX</template>% K; ^: ]; U$ i" W' x% y7 C
<ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
# s6 `' @8 C, X: h <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
) j5 I8 x$ x/ u& J5 s, J <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
6 }9 O1 R$ Y' D. B <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
5 Z+ n2 F; T2 ]6 ] </el-submenu>8 A- A; ^) X2 H
<el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>* n) u3 ?0 W( {/ G+ ]3 A A
</el-menu>
" y- B8 a; g! P
7 q, T1 q- e, ]8 O* K7 ?) ^2 t: F) P
<!-- search -->
5 g8 R& o: N( n% ]: G <br>
/ L$ B/ c9 i; ~. t1 u' r; L: D<el-row>% @ z' h3 S# _0 u; B+ K0 b9 Q
<ElCol :span="6" class="grid">5 \+ c5 N v5 c
<el-input v-model="input" placeholder="please input the value" ></el-input>
3 X; N! j0 K, M5 v </ElCol>3 B, g" }5 F. n
<ElCol :span="2" class="grid">) R" z/ ~( f* R4 w4 }. ` ~
<el-button type="success" icon="el-icon-search" >Search</el-button>$ v. D* N" j8 l+ v$ W6 w+ _
</ElCol>( {* @8 F& ~) s2 K4 |
</el-row>' w; N+ C9 e' [
<br>1 l7 t, o8 i# m/ q7 z( B
& |3 L7 H. j0 C. i. j4 w' C- i
<!-- table and operations -->8 A" \6 }/ G. j* w9 M9 P
<el-table 6 Z# N" E9 V8 b$ {9 r# j6 `6 w
:data="tableData"
' U5 p* k7 _. b3 F( x# @( `) n8 Lstyle="width:100%"
! {& N5 ?: E& d! D/ G0 {* c) [stripe: ^, S& P$ B3 K
>' [8 F4 S1 W+ R; i: l
<el-table-column fixed label="Date" prop="date"></el-table-column>1 F* O2 K1 q( g! @" L
<el-table-column label="Name" prop="name"></el-table-column>5 d4 Y. R) ~( K! W) c
<el-table-column label="Address" prop="address"></el-table-column>
/ w/ I) ?' Z- ^<el-table-column align="right">
) k! P- b/ }7 A+ k2 R e8 L3 C/ @<template slot="header">
) K7 Z- {+ w7 J+ C' ?1 l" s <el-input v-model="search" placeholder="please input the keywords"></el-input>2 b. ~' G6 Z* Y. B2 I
</template># z- E s' c3 H' a+ Y
</el-table-column>
! z6 P6 c% C/ Q* b$ K8 Q
$ M& v+ ]- X m<el-table-column>: L5 K/ G" ]6 g- Y
<template >
b1 ?$ E: O; s6 u4 h! ~ <el-button type="primary" icon="el-icon-edit">Edit</el-button>
! P! E c( ^& ?1 d+ t) s <el-button type="danger" icon="el-icon-delete">Delete</el-button>
+ c. p- ^/ l' l; j5 ]. Y' S, X</template>" E2 q, x& [/ ~
</el-table-column>7 X- {- J9 E. ~$ K% C5 ]& W& T5 m
</el-table>
% t0 ]7 v V1 A( L; e4 s/ B5 R# y' D, u7 J6 v9 u9 H
<br>
9 I. Z) T( I3 \' U% z# r<!-- Add new buttons -->/ |3 }% ]. o8 H% |: j& i. k. {
<el-row>
* i5 V: h( A8 W( ?7 K <ElCol :span="1" class="grid">
( _/ e. ?4 l7 Z" K1 G" q <el-tooltip effect="dark" content="Add new information" placement="top-start">
; Z V- F6 {4 M; v" D <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>, u; G/ c& R+ Y
</el-tooltip>9 B# K* E* r$ J1 m a8 r
</ElCol>
% _3 u! H" m# D0 f9 |* C% V* [2 |' c4 M( D3 U8 z, a& r e
<ElCol :span="1" :offset="1" class="grid">% b: \' o$ N% B" u0 H/ A
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
+ z8 [; K* S/ i& t F <el-button type="danger" icon="el-icon-delete">Delete All</el-button>9 O: a# B: z) ^* ]' s0 y6 [/ t
</el-tooltip>6 {8 \% ~7 v, z
</ElCol>
, `( o( F ]5 p) x$ o n
7 g4 j! x" |; m& [* U</el-row>" {/ C, h6 H( M
$ E" Z, F9 J2 B1 z2 H/ _<!-- Page split -->5 h: M1 D* Z7 Y! w& q& C
<br>
9 e$ u8 m! m1 d" ]7 Y+ h! G$ J. r3 f7 l7 c% T ^/ ~) O: F7 |7 e4 U
<el-pagination background / }2 f8 D- J! }6 p" ^- h' }/ G$ _
:total="1000"
1 [: Z& [" `1 U layout="prev,pager,next">
& S) h- _. f- m0 i/ C" s, h, w% Z</el-pagination> Z& g& [) i# `; A3 X
, |7 Y% f" Q, ]9 R
) T [/ t; E, @/ _* m& l
/ z+ s) R. p2 H" O/ p& B# v3 H</div>8 U( @' q. d a1 |
</template>
5 M* z" s) d% m' b1 S5 N1 \# M
<script>2 Q& Q5 Y/ T/ a" o
- \; Z2 @; g, s! X1 ?. U& g5 lexport default {
$ v7 R, t. P. V; D6 G) R, |! @, i name: 'app',) m5 x; H; G# X/ B) ]
data(){
4 i$ g- x7 Q9 y9 O return {% U% c) N% Z3 U. f$ @
activeIndex: '2',0 z: i% ~/ \0 X4 Q4 c& D3 d% {
url:"http://baidu.com",& V7 N! \' o% J( W7 R Z0 n
tableData: [{
' |' L$ M7 K5 d, G- U% u, q date: '2016-05-02',
9 U' \0 P' y6 K1 Q# q name: '王小虎',
# ^: b% ]+ N+ _ Z address: '上海市普陀区金沙江路 1518 弄'2 ?1 X: E7 @! Q# n
}, {) R! g: l: D) }+ v3 }4 `
date: '2016-05-04',
0 F8 b! P: `: e name: '王小虎',
. Y8 L: l. R/ R0 f; A& L! t. V4 V address: '上海市普陀区金沙江路 1517 弄'
8 x: \( Y1 l0 L. b }, {
5 P% a9 s- f: \0 Y6 t7 D/ k2 E3 L date: '2016-05-01',
9 L0 l8 C/ c0 g' W! V name: '王小虎',
- V: W* i c9 |3 y7 _ address: '上海市普陀区金沙江路 1519 弄'
3 H4 L. X$ r+ s+ X }, {/ s! e# C# I# Y2 g: ]" k, I( L4 o
date: '2016-05-03',
6 _8 |% Z7 e8 q C0 k name: '王小虎',
0 u+ A6 m0 N; \) X address: '上海市普陀区金沙江路 1516 弄'7 B: W/ B6 M% h8 _% L
}]
4 B' V% ]9 o. F' F6 ~ }% Z. a5 N6 s: `+ m9 q" u7 }
}2 w. `- `* f: W& g& [
} y6 ~, e$ ?! A3 _5 S. z
</script>1 l: g$ J5 |; r) J6 @, E
0 V! w7 s: B1 d
<style>
2 D, G. k) b$ E) r #app {- }, [" ]) f: Z+ F2 u9 I7 F
font-family: Helvetica, sans-serif;1 Q! N( m# S) Z+ t
text-align: center;
! t4 }3 }1 `$ r- F& a, j }% x: E. n! a B. i% |" c5 I
</style>& q( W# B" n/ b, @* J$ A( R/ h4 J
* N. D, H8 P. ^: f: X
( }& C5 W( k5 ^, J |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
