|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习
- E" v/ w5 U p# d1 U2 w/ B
2 l* |" v# w8 O4 M5 m
5 I/ p6 H, x) J" V8 E. f G4 U# i3 ]: T7 @" J. \( Z
<template>" e5 C, ^9 h+ K9 G! t
<div id="app">
, }! y, r& X P% R- D0 _6 O' j <!-- nav -->
. J, g6 n) i* x! D. C; y$ }( Z <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo" , S# N0 c( i/ D- Y+ b" N! ~4 C
background-color="#545c64"
) Z2 `& l3 W) B5 ]+ I' G text-color="#fff"
# O: I) h8 w* v6 M active-text-color="#ffd04b"* v! D3 r' Y3 j, F
menu-trigger="hover">
1 I* v) B/ J' P! B: k <el-menu-item index="1">Data View</el-menu-item>& N3 J" B( c0 p
<el-submenu index="2">
6 ?* i4 y+ Y$ s; n8 M: u' Q6 ? x( r <template slot="title">Data XX</template>: Y$ Z# F& ^5 A- f
<ElMenuItem index="2-1">TC Data Collection</ElMenuItem> \( H4 |% u% y( v* [6 i
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
2 N; t* h" d; \ <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>6 w6 @- j! ]# b: G
<ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
3 M6 b: V: d: j6 I" A$ z1 w </el-submenu>+ \ k2 ]8 P( G- ]. s
<el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>7 D; {. ^0 b: C0 i
</el-menu>5 u w# g- z7 K) |! @
8 d- a6 T$ s& ]* U7 t2 ~5 N
$ j e4 I8 r" d9 v, w. ]$ c
<!-- search -->
$ F$ j. @7 i9 i* e/ l5 G7 K; N <br>7 O; I) h m4 i. g; d- W5 {
<el-row>
+ }, t: G1 O' `; l0 V6 ^ <ElCol :span="6" class="grid">6 D; g" \5 ^6 b3 ^# I# O$ u; f# f% D
<el-input v-model="input" placeholder="please input the value" ></el-input>
6 A" Y, ~( @+ d! a9 O" h </ElCol>( j) B, h5 G+ M6 }
<ElCol :span="2" class="grid">
! i( D; t2 k* K5 X# n <el-button type="success" icon="el-icon-search" >Search</el-button>
& y$ E/ z- z* m; y" i7 c1 S/ j" { </ElCol>
# O) z/ a6 Q$ W) W1 Z9 M</el-row>
; H' W6 E! q1 t& G ]2 @ <br>: e- p* S! n3 G5 F# H# T
* k: w" ^6 a, f. B/ {' q<!-- table and operations -->1 L8 o/ N5 ^ r: G) N
<el-table
% }8 v6 D8 C) Q7 T) m5 A i. v8 M& ^:data="tableData"
) B2 G0 q3 p$ l5 p3 r$ Y* rstyle="width:100%"( f3 {; m+ ~2 l$ E7 ?, U* }) m. E
stripe
/ A& g3 X- B& h% V2 B0 F6 n5 U2 \> K% d% h8 _: F
<el-table-column fixed label="Date" prop="date"></el-table-column>' u/ j# w2 l1 s# Z5 _& x j3 R
<el-table-column label="Name" prop="name"></el-table-column>. m+ P; I! n6 E
<el-table-column label="Address" prop="address"></el-table-column>
5 P. k) f: n: {# ?6 D<el-table-column align="right">( V0 J6 q7 P2 f9 [6 U
<template slot="header">
; `$ F9 x4 o% j <el-input v-model="search" placeholder="please input the keywords"></el-input>
; k) l* V u/ e- n' q4 `& m( _</template>" [' a% p4 D2 y7 |+ A! O
</el-table-column>
$ C( z9 ]) ~: s; _5 C0 k4 i
0 e3 W6 m' |0 a5 |( ]/ r<el-table-column># A; h3 `7 V: R0 x8 q
<template >
7 K4 q4 g+ \* W! a+ W <el-button type="primary" icon="el-icon-edit">Edit</el-button>
3 w* d f' ~$ K6 ~* g' w- U6 j <el-button type="danger" icon="el-icon-delete">Delete</el-button>
7 F5 ]1 P0 N: y9 ~* s5 `/ I</template>
$ \7 z3 z; a0 [, d% A</el-table-column>
% s4 x2 }9 x* e: z7 m# a5 x- F</el-table>: m2 p/ D/ {) c6 |% g
2 E2 \: u% X0 P<br>
" x' B3 ?: H5 E/ Q' S/ d$ R<!-- Add new buttons -->
3 j# L* p% E! W/ G5 E<el-row>
0 H& M% J" i3 X4 v2 p) I: l: I <ElCol :span="1" class="grid">% Y0 G. \2 @2 a4 J
<el-tooltip effect="dark" content="Add new information" placement="top-start">
5 Y/ e* p2 `5 p- p <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>$ \5 j; K* z* X5 j' x
</el-tooltip>* n/ e. H* t# P: H
</ElCol>
- A( i8 |; l) W
3 @2 q8 J1 n" p& S8 Z2 k6 t1 J <ElCol :span="1" :offset="1" class="grid">6 ]& M0 t+ ^6 k( l4 B s/ E
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">+ I2 z3 R) K" [! N# c. `; m
<el-button type="danger" icon="el-icon-delete">Delete All</el-button>
5 z& ^, j8 O0 i5 O+ N- I </el-tooltip>
" Z0 T8 o4 z6 w) g </ElCol>
9 V# }+ W2 F* _- Y2 D9 _% P5 ~0 D- r V2 N! q: ?
</el-row>
- S4 A) p1 {" k4 N
3 Z( Y' N8 f. g4 R. c<!-- Page split -->0 x6 v) k6 y, a/ K+ P0 _
<br># l3 x2 r- z3 f! P- W
% B2 C- U# N7 O7 g; u- {7 j- A
<el-pagination background + q9 d9 Z# z( f
:total="1000"
4 P0 i! c, v w0 o* j layout="prev,pager,next">) r2 L! @/ @+ B4 t; I3 F F
</el-pagination>4 b+ G" c6 G" }* \9 f* T) m
6 E {% i- R% w- F2 t0 n
. N0 B( V$ X$ E/ s: i4 s4 x5 Z8 P9 e+ A8 _1 t6 b
</div>0 Z9 ^2 v+ Y4 Z D: f
</template>
; a" x! W$ u: U; e6 i
9 p5 m( M" K! H' l3 v, }" G: k<script>2 [, a% N" V3 R6 `
& E3 F1 J2 z4 ?) }) j" D$ [# wexport default {9 U E K3 Y" S6 P/ j) l/ |
name: 'app',
6 u& `- b, X, s- Z data(){- u" T3 v% | N( _8 f
return {( R4 E/ S2 y. x$ y; [
activeIndex: '2',
2 p( p! l- l4 l url:"http://baidu.com",9 n6 b4 ? V3 J& G1 S5 ~- ]3 ~
tableData: [{; Z; Q( t* M% H0 a: t# c
date: '2016-05-02',9 q7 F) J( `. C* Q6 V: V
name: '王小虎',1 N: _% O+ D6 ~' [6 v
address: '上海市普陀区金沙江路 1518 弄'+ R4 m5 J- \; J& i& c
}, {& o6 j& R. @3 H2 e$ A
date: '2016-05-04',: h. o4 U! A, x$ ^2 |! p5 q
name: '王小虎',
3 L/ y+ |5 x) ], l. \ address: '上海市普陀区金沙江路 1517 弄'
: z/ T0 a9 C3 C9 C Y7 n2 M4 P1 D }, {
( [- B3 n" i( ~7 c1 k0 ^ date: '2016-05-01',8 ^: ~' K3 L; f0 S
name: '王小虎',
2 ^. A% z! s5 g% B W* { address: '上海市普陀区金沙江路 1519 弄'
. T1 `- m( y9 C% u+ ]/ F }, {, q8 u( {; J5 S3 t7 e* ]' k
date: '2016-05-03',
1 h- z: h% C, g7 F name: '王小虎',
8 U y4 Q) r7 O9 e address: '上海市普陀区金沙江路 1516 弄'" b; s9 y1 m7 J b
}] e3 l3 P, V- b; d
}# S! v6 S. Y% l5 y2 c" X0 j* j
}6 O6 B' }/ L7 o# p, h
}
' j5 z- I* C7 ]# y3 p, ^3 n</script>
6 ]) ~- e; w2 x( V" D
+ t4 T- X! W/ o1 n* Z: u<style>
8 Q6 [3 X) {, W4 x #app {2 i; W; ?! ^. Y# s0 n0 i, H" N8 f+ u
font-family: Helvetica, sans-serif;6 y( ?1 i1 y" g
text-align: center;
/ t! t9 v6 g& r# | }4 ~0 \! x+ D; N, Q$ v0 K1 A; I& `
</style>8 R( Q! q. C2 }8 _6 I6 v- `
. |( X3 R$ A' R6 n
) Y) S1 C) Q7 e) ]) t |
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号-1 )
发表于 2019-3-18 15:13:56
