|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习
* p, R) @, s& v6 f8 c/ `" @% {2 T" X* z l& o* Q
7 H/ X9 F& F+ r
3 W5 t; K9 H3 I9 G! g0 i. p# {<template>
) w5 y% m& y' k) P$ _/ H1 ^ <div id="app">+ C: J2 x6 l1 N7 K' Y
<!-- nav -->- k+ Z0 d/ p9 `0 m" X6 o
<el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
O. d8 L `# v, m6 B background-color="#545c64"
& X$ j6 _8 A- y. G7 B text-color="#fff"
/ }- O* s" O9 b. }3 p( B active-text-color="#ffd04b"1 `) K3 F( ? @& m: G* |6 d
menu-trigger="hover">
+ l5 u8 {" I* H1 k0 D+ B* J: D4 H <el-menu-item index="1">Data View</el-menu-item>
5 |3 r) ]! H# \+ L, [- B- o* x <el-submenu index="2">- f+ {5 P% M* s6 Q
<template slot="title">Data XX</template>
% @- P% ~! o* E5 h( h) h <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>+ l* z4 i3 m5 `4 A
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
7 L6 L4 R# A( ]0 a) L& s <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>* h# P' c4 e% r y( X t8 \ }
<ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
8 J$ b: z, Z/ n+ h+ q8 ^$ d* |9 E* P! }) D </el-submenu>& |6 l- V1 T, J1 Z
<el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>% H. Z V. o8 Z; @8 _5 k6 r
</el-menu>& ^4 x1 E: | C3 \$ H$ z
; Y2 q4 e! f) ]0 R! q( f" g% a
0 t! Z; c1 h# r* y- c <!-- search -->
/ s9 Q$ m5 v: ^* z5 A% O( l: {$ r <br>
" j; o i) V8 @ D: l: L<el-row>
3 q- S, K7 @0 @/ W5 M" Z8 f* U <ElCol :span="6" class="grid">$ M$ M, M9 s* Q+ F. b. R2 a
<el-input v-model="input" placeholder="please input the value" ></el-input>
X J# C" W) e/ J0 N </ElCol>
" E; N( k3 ]4 u5 z. O4 o7 ? <ElCol :span="2" class="grid">2 M- X! K8 _" k& A% d' a
<el-button type="success" icon="el-icon-search" >Search</el-button>, ]; w9 Y- S) N% A
</ElCol>. a0 z+ |$ p2 G+ M0 n [3 M$ p$ T! n
</el-row>7 W; F9 g' ~# j' n" _; u! x+ k
<br>
5 _3 T; c7 ]. j; W
, Q/ n( k% r8 ^8 j2 M! Y<!-- table and operations -->: @5 M% I7 j8 b
<el-table * E6 r* E0 O% Q R5 I, M8 U
:data="tableData") j) j7 \; W8 S H% _
style="width:100%"
. h, i+ C( z! c9 K- \6 Tstripe; ?- I" J( H6 H( E$ m
>6 ^4 Y& r S8 z+ P! J. S3 ^7 _4 I
<el-table-column fixed label="Date" prop="date"></el-table-column>! a' Z6 r" i8 C& }6 X1 |
<el-table-column label="Name" prop="name"></el-table-column>
! H" q) Q/ A( I8 C" e5 d3 y7 T: i<el-table-column label="Address" prop="address"></el-table-column>$ E- o3 F2 F( i9 m8 i9 W' K
<el-table-column align="right">& G! B' c6 i0 K {
<template slot="header">4 Y( T( E$ T3 P4 D* A8 A* s
<el-input v-model="search" placeholder="please input the keywords"></el-input>3 T4 j& p+ I8 u% c% z+ \9 G. l
</template>
4 g" V7 v2 j# ]" v/ g/ O X</el-table-column>$ a7 ?8 W: J+ M4 M, l
, H' p7 {# p# M8 y6 ~0 s$ L. {
<el-table-column>
2 I7 [0 o/ f/ j/ R# ]0 h' }8 M<template > k7 }' ^# X& a% Z
<el-button type="primary" icon="el-icon-edit">Edit</el-button>; t o, S' w/ Y$ C
<el-button type="danger" icon="el-icon-delete">Delete</el-button>
+ P+ }. P) W8 w! Q7 d</template>
! p Y, l2 ?% |9 h2 T- v) P, c! O</el-table-column>5 B! D8 k+ h/ @* D7 g1 a4 \
</el-table>
2 G( E' r, O& B& e! g* s+ B$ A" B/ n' L) Y; ]6 n8 a
<br>
" ?9 e% p3 {/ ?% S<!-- Add new buttons -->
, a7 N: g0 B; J- E3 P<el-row>) X. ~ t9 g! @4 W0 K+ f
<ElCol :span="1" class="grid">0 p% T, @: F. s& l+ l8 {$ X& F
<el-tooltip effect="dark" content="Add new information" placement="top-start">
7 l; U, x2 u+ ?8 h <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>) O1 v- N: e. z2 D ^# \+ W6 ]& v
</el-tooltip>7 ?' ?3 u& p. W
</ElCol>6 h% h0 m4 e. l, {& ~
J2 I2 r% b( F8 P3 p <ElCol :span="1" :offset="1" class="grid">/ N! G3 U5 B9 O. `. v# O
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
1 y) b4 }' W+ v% | Z1 N/ O <el-button type="danger" icon="el-icon-delete">Delete All</el-button>
8 t# i: ~8 N5 `* y# z </el-tooltip>
! ?, _2 X% H4 }, K( ?3 I k/ R </ElCol>
/ w" r: P7 o, x% `
. l( Q4 T: o% q5 L0 ~0 a8 O/ I' H</el-row>- Y0 e" w" H" d
% E2 J) h9 ^. j: L<!-- Page split -->' {' r4 o2 w2 q7 R* x
<br>) q* }6 J8 q1 H0 f X- }
+ i0 b0 d4 c- }" w, }
<el-pagination background
; I* C: y0 q$ C, ^; x :total="1000"* S) B7 T7 {4 _* H7 R5 w5 C
layout="prev,pager,next">6 v/ W* `4 l* n3 u6 u
</el-pagination>' |5 }' j' E$ z$ }/ ^: T
9 v1 f( a- W$ T6 c% _( o% ?# X. Q& ^3 X+ k
2 r# A8 O5 r9 j( S/ {9 z* v2 o: C
</div>
2 ~0 z6 {- {! x7 `- W @2 M</template>7 I8 T" _0 X$ @' ?$ K; U1 S5 a
C$ G- Y$ S* x0 z<script>
, o. J! ~0 ~) w- \& Q
" C2 V4 h- d6 @- P# Texport default {
~ m0 m& a" \( L# ~% e" X& R name: 'app',5 s) Z- A/ ?$ F
data(){" ~$ ]( e6 a. m1 ~' w
return {
J" J) R, V7 y3 D" P5 l activeIndex: '2',( G. l% r* r; |" s' E% q
url:"http://baidu.com",5 t$ e- o, i/ U% q" c- p
tableData: [{
. W! c: H c/ ]* x! j* Q6 y- d date: '2016-05-02',
" W4 P) s% L* Q name: '王小虎',' L& A1 M+ g5 F* ?! _1 ~' U
address: '上海市普陀区金沙江路 1518 弄'
; X; j: O' z& w# f2 [6 r% J }, {
0 l$ _8 \; T' _' E4 T4 w; O- s date: '2016-05-04',
4 g7 @7 o7 g: }8 P name: '王小虎',
6 y* t3 C' v D) B address: '上海市普陀区金沙江路 1517 弄'
! R* M( r3 K6 F9 ] }, { S6 n% V5 G5 ^
date: '2016-05-01',1 t# v" z% W+ T
name: '王小虎'," a6 ^, ? [( I" O: Q z+ y4 n# [0 A; R L; R
address: '上海市普陀区金沙江路 1519 弄'' ?. \2 W' |( k2 D% j0 j" P
}, {0 }) e4 h# O1 n( e& p8 p# B- J
date: '2016-05-03',- R/ M% L9 k( |) ]+ A$ j
name: '王小虎',
% u- R; @" B# T/ Y( C8 Z address: '上海市普陀区金沙江路 1516 弄'
$ n7 \, {, ~, g$ v0 ]# j }]* ?& ~4 n8 J7 B$ ^
}
$ }8 ^( Q: m8 k/ m, d4 C }% j- z8 p) L% `# S% \0 h
}
9 J4 S9 H( a4 {9 b0 Z8 H0 D" z</script>
: c/ X- w4 b2 b$ e8 u) H9 B/ `3 F& d) s; A
<style>! A0 D# U; M- w/ K: D# W
#app {9 T6 ^; ]( `/ h/ k' k! q
font-family: Helvetica, sans-serif;# e' k0 e+ q D
text-align: center;
, i! y# M' K. ^: g0 E }3 W0 L3 H3 `0 Z& ^" i% h
</style>
' w- K) M7 R; I* }" g& ~: r7 h, N7 A2 u$ {) o9 |
- O0 }0 G6 n( R5 o; v
|
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
发表于 2019-3-18 15:13:56
