|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习
: p- D- S+ ?0 k c' N! E( k% c, d- m3 {& Q
& @# h1 W! p1 a5 C7 x7 S p" G5 p2 z
' j& I0 M. M. K
<template>3 c) U( \; n) ?8 Z
<div id="app">/ F h7 L7 f& Y" T3 b" Q9 \
<!-- nav -->
* u* D& _, F1 L- ^' Q2 F <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
( z7 ?2 W8 b# M- }& S. V, ? background-color="#545c64"5 y* @; p! K5 E: V3 O/ }
text-color="#fff"
* U! l6 `0 Y! y. h% x8 _, R0 m! ] active-text-color="#ffd04b"
# M* h$ W1 K5 _5 N/ B' R: e menu-trigger="hover">* V, {7 {; r* f; w1 u
<el-menu-item index="1">Data View</el-menu-item>* M" Y9 N7 \" y5 M" `0 d' u
<el-submenu index="2">
. P- ?* H. {! w4 b+ c% @" p <template slot="title">Data XX</template>
, f* q4 x8 w4 G8 D0 U1 } Z <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
- J4 t! R! n' Z/ {& y0 q <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>5 o$ U y- ?& q/ `" s
<ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
6 M. p5 \* k( e8 A <ElMenuItem index="2-4">XX Data Collection</ElMenuItem># F8 p4 j2 E- C; I" g" Q5 w
</el-submenu>! g5 I! [1 w2 g. a
<el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>0 u" f# f+ h4 G- k/ o$ P
</el-menu>
. t- L9 q7 W. k2 c" c, H7 A& c% o( M" C
% f+ A# u, o: M6 G. |) e5 \
<!-- search -->
3 A' q" c, e0 z3 z( j% x8 X0 T <br>
! ~ |4 `% y# @- r: h<el-row>0 X- V) u( b7 H) N P% ]
<ElCol :span="6" class="grid">
, n" d# P& Q7 `+ t <el-input v-model="input" placeholder="please input the value" ></el-input>0 O7 I* F% W9 @! f
</ElCol>! u; ~1 P( S Z1 V8 L5 Y% w% m9 u1 @
<ElCol :span="2" class="grid">4 T0 N: Y2 C: k* f7 J2 O
<el-button type="success" icon="el-icon-search" >Search</el-button>: P) N' E% q* y7 Z
</ElCol>& ~" }8 Z* L' u4 z9 `
</el-row>) \3 }* n v7 h) F! V
<br>
% c" V" g' q0 v7 F
1 p+ ]# A. Q% U/ G<!-- table and operations -->9 \( o: }' }1 Q6 \! `) |2 Y7 W
<el-table ) Z0 u' @. P ?$ |8 s
:data="tableData"
& O \+ W) G( S2 @ ? l! `$ E! xstyle="width:100%"- _" b) H5 j! |: l7 w, c) T
stripe5 ^- v( F! R( ^" Q
>( a' k8 b: S/ K3 g' o
<el-table-column fixed label="Date" prop="date"></el-table-column>
, {9 J4 Z: y) A' |* b4 H<el-table-column label="Name" prop="name"></el-table-column>! v; H' j f* z: t
<el-table-column label="Address" prop="address"></el-table-column>
8 X9 \7 P6 ]+ p<el-table-column align="right">
; ^- K) s; v' K* i<template slot="header">2 U2 t+ n5 A! o" J$ T+ y
<el-input v-model="search" placeholder="please input the keywords"></el-input>6 Z+ U' Y) E0 @1 L6 _$ ?; c
</template>1 ^1 \: {: r! a7 D9 ~# T
</el-table-column>! U2 R; ~4 b8 R6 F# z W b8 `" ^
& Y0 n+ _( d- w: W% W
<el-table-column>
5 G: o6 k9 J# H* D: @! E<template >! p7 E6 b0 s" J" N9 q
<el-button type="primary" icon="el-icon-edit">Edit</el-button># m+ R4 ?" H" t* [
<el-button type="danger" icon="el-icon-delete">Delete</el-button>
' m J) Z0 o' N</template>
( W' I- a# Q1 O" u- Y</el-table-column>
* u) A$ [: p* c8 k</el-table>
7 j" j, Z8 K/ d K7 O1 e# r3 V+ M2 l) y, X
<br>& L) Y# u5 Z& ]5 k
<!-- Add new buttons -->
' V7 u% O+ k$ G+ Y @5 ?0 s' O<el-row>% W0 r, T# ^3 }4 D
<ElCol :span="1" class="grid">& s: N! b: X) s" t" D3 {5 }
<el-tooltip effect="dark" content="Add new information" placement="top-start">6 o) j: u; W9 n% B. v( @4 v
<el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>: k1 @& V) Z" W' V# L/ C! n. M6 h
</el-tooltip>1 D. n9 Z( P! o% {+ X# z$ J
</ElCol>
L; a# A' B5 D3 c8 ~' Q- J
) @( p/ B J7 @) }7 Y- j6 Q <ElCol :span="1" :offset="1" class="grid">
6 F) n# ]1 v0 b, S" |$ @. F% C <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">$ s! S- N( G* [+ }
<el-button type="danger" icon="el-icon-delete">Delete All</el-button>, F! S# z1 ?! m5 h
</el-tooltip>
, Y9 r* a$ }9 D- M. V& H </ElCol>/ ~# y U; N* f& o3 {2 F7 Q5 y+ i6 _7 t ^
5 A+ J1 i; U; r+ k8 |' Y- O
</el-row>2 x* n. f/ _1 c- l" j$ C4 K
$ Q, L% p) w% L2 v& ^ O<!-- Page split -->
& @ R' |) E. P5 q( Q& S& x7 `<br>
. y0 k8 C3 O5 `3 M' f- d5 c) F C$ ^. G" C. N% z7 G
<el-pagination background # i) k; R* T2 _; O7 k7 R1 w
:total="1000"! H7 `* G. F6 V" [0 W2 L
layout="prev,pager,next">
' Z0 s- j) n3 a5 s</el-pagination>5 X$ E+ U& {+ t. A( @/ v
+ y8 N3 L# H& |/ |: ?" m ~. c
. I/ ~. J0 }, l5 _- C* r+ _
! G) ?. y) m6 W1 R/ }" u' C</div>6 a% W! Z- \5 B& W: f0 x
</template>8 n0 q" D/ `, {2 w
! d" V9 ^) n3 O0 Y {% j% |6 k
<script>
- u7 n, e8 }3 k! a" J/ [/ p) d8 N5 m. X7 F) a% h
export default {
& Z' i8 l3 c& }7 s: s name: 'app',
( e5 L1 b7 ^9 H2 I. ~( q- V- Y4 { data(){
8 l1 Z& k9 r2 R! u; I6 e return {4 N) {6 c0 b1 k" Y H/ `- G8 J3 J
activeIndex: '2',
" _% T- O _' [& m url:"http://baidu.com",
8 a/ X/ I; U- m" H2 s tableData: [{) o$ |. Q6 n7 t( b- P
date: '2016-05-02', Q4 g$ d) p- G1 g1 T* a! l
name: '王小虎',6 r: i# _ p' Q" w j
address: '上海市普陀区金沙江路 1518 弄'
4 O$ j6 Z7 ]' a" z; g+ A& Y }, {) W& _5 [5 L$ S6 t9 \" \) J! Q
date: '2016-05-04',
2 }, g2 v% D) W, P$ A$ l. W* w name: '王小虎',
; m3 X* V/ ]% o7 g address: '上海市普陀区金沙江路 1517 弄'
# J8 u+ |0 W* V0 Q; I2 b }, {
$ L) G! q) b8 O$ Y, Z1 j* J date: '2016-05-01',; ^. F. } u& s. B3 e
name: '王小虎',
/ o1 Z) ?, y% d address: '上海市普陀区金沙江路 1519 弄'( m0 o7 n1 ^) ]: y* p
}, {- d5 y5 r; p! { q' `) Q L1 ]
date: '2016-05-03',4 @; i5 h! z3 C
name: '王小虎',
' [) R T I; f address: '上海市普陀区金沙江路 1516 弄'0 }( H w* Y _+ U) j) U$ D
}]
. f- ]3 x; S$ V: l. m5 N }
! b) f B2 b7 E# R5 I }
5 `: i7 S: k3 u, L5 G# o; C* \}; D1 L: I7 s, N, u1 Y
</script>
/ x; X0 l$ [) @. _. G, x: r* P2 f" L, f6 r( z
<style>
2 ?3 Y: ~3 w/ g+ P) i+ O' A1 q9 A1 T #app {
7 H* S. @8 Z+ a. t% n& t7 M font-family: Helvetica, sans-serif;! q0 i+ {1 m; q' W* {3 i; h# G; H ~
text-align: center;
/ d' C% ^6 `/ x' M- t; J% Y8 { }7 t; i7 }) F+ ~% T/ e! L
</style>
, \& g. C( K6 T3 B/ ^; @' y# ]8 K4 J* k" i
% m" s" E4 z) w
|
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
发表于 2019-3-18 15:13:56
