|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习9 L ]+ D `- y' e' `/ P- m( v
8 |$ J3 U+ k1 l6 d2 J
1 S. Y5 H" u8 H% e& q0 j
! x6 R" {1 \2 T4 s& G- T<template>% U$ C7 M9 X7 h$ E1 j
<div id="app">
8 l: f( s/ b' h: L/ N! k <!-- nav -->* B" j& W) c( V0 d/ ?6 w: W
<el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
. [! s. X4 b" W; u* R) @# X background-color="#545c64"
% G- L$ A, L U. S) K: R text-color="#fff"- |1 f6 A3 h- j
active-text-color="#ffd04b"9 e) i) h, J7 m
menu-trigger="hover"> }0 G2 F. q5 V9 u) b( j8 D
<el-menu-item index="1">Data View</el-menu-item>; b' \+ ]& V# n
<el-submenu index="2">* e/ M4 ]% c' k2 O* x: D
<template slot="title">Data XX</template>
$ C u4 W4 w4 i4 U+ e <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
' H0 P7 c3 q# Y- f3 z <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>8 N& p0 _3 q* Y( f
<ElMenuItem index="2-3">XX Data Collection</ElMenuItem>2 p6 {" w' e, [$ A7 K a" X: o
<ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
( _2 @. N. O2 U6 f- l </el-submenu>/ L. R3 u0 b% @- d9 m
<el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>2 L. ]) |/ L5 K
</el-menu>' e% s& |; L9 E5 C2 F
1 \# S/ P3 E3 R( _. T
8 Z8 {0 D N$ G/ r <!-- search -->3 T/ _$ S+ \3 `5 _! N; H2 w
<br>
5 ?: R: D6 R' J% l- e: l* f<el-row>
+ u& s& ~" W0 D* x <ElCol :span="6" class="grid">
! V0 _# ^6 o+ M' S <el-input v-model="input" placeholder="please input the value" ></el-input>) V. c0 @1 ?8 ^6 n
</ElCol>/ c# M+ t! @! {
<ElCol :span="2" class="grid">
3 O6 I( i6 C: J- ] <el-button type="success" icon="el-icon-search" >Search</el-button>
9 F- @( d0 Y( q1 m1 N# h </ElCol>
# H% ]1 K0 B* \' s: Z</el-row>( N+ @& W3 v1 P( x0 s( y( [
<br>
$ o7 l+ S/ u c$ B$ l" P) E3 m( E, v# |& k
<!-- table and operations -->
0 X9 x. {& D9 O+ c. ~4 X- a<el-table
5 J0 W# s, @& z0 R( w1 z:data="tableData"+ Z8 l0 D9 y# G' Z
style="width:100%"1 ]3 G! [) N7 } N) P* P
stripe
: t+ T* h: b: g! G6 \' P>
- o; Y. S8 q5 p/ i1 o0 f# o& ~<el-table-column fixed label="Date" prop="date"></el-table-column>
4 z! H- Z; }9 e<el-table-column label="Name" prop="name"></el-table-column>
. x$ C5 }) ^( w4 u<el-table-column label="Address" prop="address"></el-table-column>
2 g" Z% t' a" H) J( w" g<el-table-column align="right">
9 r( t9 i4 ~" B<template slot="header">4 f- i5 m1 N' E2 @: E8 V0 H
<el-input v-model="search" placeholder="please input the keywords"></el-input> ~& @9 N( A8 P% L4 s
</template>' n, Y6 J. q+ z' k% p1 [
</el-table-column>7 f) m8 M( O4 C
A, s/ U4 |) e0 c4 T: I
<el-table-column>" x- P4 n. F/ U& l! W
<template >
; b, {. [* U) X! N3 U' z <el-button type="primary" icon="el-icon-edit">Edit</el-button> b" I" w+ u" K9 |9 q0 |
<el-button type="danger" icon="el-icon-delete">Delete</el-button>/ h& ^, `' c7 M+ C/ G' H
</template>
6 C' e& s* k! B' b3 `</el-table-column>
* C2 Z6 [4 Z7 V$ ~</el-table>
& h8 N/ J( D# [. o% G
! |3 P6 d$ z$ \: {( s<br>$ v0 J5 _. n6 g m
<!-- Add new buttons -->
6 t3 s3 X$ G) `" q) e<el-row>
8 i# w% C+ k5 r& v <ElCol :span="1" class="grid">: i; m0 Z- K4 x. ]& b
<el-tooltip effect="dark" content="Add new information" placement="top-start">
2 u- y6 m( v( H h3 r: \" ] <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>0 p w$ V# D& u) [
</el-tooltip>9 B! y1 o- l# V4 U1 D! w$ L
</ElCol>
, `, k" `- e9 j; l& W9 _ O" n% |
<ElCol :span="1" :offset="1" class="grid">) D9 h. p* x# q `
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
0 \* m4 R, J5 j9 }) B O }3 ` <el-button type="danger" icon="el-icon-delete">Delete All</el-button>5 C8 M$ n6 l" _$ }; g0 y t; i
</el-tooltip>
( a) |( G) r7 \- W4 z </ElCol>1 k7 c, Q# w& I- ]* h4 }; y
s# h5 D( t4 g4 q; C. a</el-row>
6 H4 {% u7 U: c4 _) |7 ^ J1 N$ x3 C1 c- B* `
<!-- Page split -->
0 ^8 |7 }2 w" C% Y0 ?; c<br>
3 N9 h/ Z. T' N) A: d; ?# g# D: i9 Y7 a+ Y* Q9 k' i8 F
<el-pagination background
, ~& g3 r+ y/ V2 e+ {! z+ D :total="1000"
7 X2 [ D( v8 @, h; L$ z layout="prev,pager,next">
a/ A* c. v+ R" I- q6 M+ T</el-pagination>! M, R- T7 y% k: M6 n1 m4 O
! Y( j3 A- v6 `0 z5 F4 n3 N
2 k, x' D1 ?' p w% ` i# O1 {# J/ Q6 p, h' W
</div>0 s) I3 H1 G) C: R
</template>
5 e+ J) F9 s& v' \: h; \' z4 P% `7 P7 K) j& R }$ [5 i
<script>; }1 l5 F. G0 A% ^6 A
" Z; r( h) m/ B/ p( z: O$ b
export default {
4 N' e% j& t& K& i7 e- [ name: 'app',
' J; f7 d' K9 G/ U) S" E/ { data(){, H3 p( `$ g$ _# l) V$ d2 J$ o
return {" `3 N& t! r' N- c% o0 y; G9 r' ^$ A
activeIndex: '2',5 i. l8 |& ~9 j
url:"http://baidu.com",. w6 u9 h% T$ z7 ?% O. z
tableData: [{" r7 \6 B+ z5 y% c! ]" L
date: '2016-05-02',
( \9 `1 @+ z# z name: '王小虎',/ [2 |7 W+ E# P/ V" X
address: '上海市普陀区金沙江路 1518 弄'
, q. N1 k, l( {9 @ }, {
f2 j( i: Y9 D date: '2016-05-04',; M' A8 w" Q" f! K4 v
name: '王小虎',
8 A, W# y$ |6 o address: '上海市普陀区金沙江路 1517 弄'
$ P9 M6 j' q* ^ }, {1 K& [9 ~( [/ b- z) [
date: '2016-05-01',
9 X, H0 _8 B# H7 U5 R, z, N name: '王小虎',' [; a# Z' N( e% b4 h
address: '上海市普陀区金沙江路 1519 弄'4 ?! m4 ~- I8 ^7 k
}, {) f& \. S' t+ p4 K4 d
date: '2016-05-03',$ J. f: c C6 H, p2 d
name: '王小虎',
( r! F X+ c! h% N R address: '上海市普陀区金沙江路 1516 弄', L1 L7 m$ |3 W( y) |
}]
$ K# |% ~% x1 g. |/ V* B }
- e C/ D0 [, D: L- [1 N }9 t4 J8 _3 u2 w, B& `$ K; k
}
$ ]' @- C1 d: G5 M. d0 l</script>; M# G- L6 b$ r- ^2 h8 P; q3 ?
, O6 p8 N- Q9 V
<style>' p0 V. W S/ ~7 f$ n; M
#app {* N$ A1 e$ }) w& I0 V. `
font-family: Helvetica, sans-serif;% _0 J' Y2 Y) L8 C% {. P
text-align: center;. @+ ~" C; S, \5 w) J: G
}
* s# R# q. E4 ~; W6 ~5 _4 M</style>
+ ?0 w9 M, P5 V' Q, L, ~( X& h0 L. W$ N$ K1 l2 e
7 r9 a! w( B t& k; o8 e8 Z |
|
|小黑屋|手机版|PLM之家-专注工业软件生态建设，大模型CAD创新生态
