|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习
( o* j8 }* R) i% r4 Y. h& B: B% D& t+ y$ ?8 Z
* O9 M; Y! b" m1 ] n% \
, \! E% Y; b( K9 Q9 |
<template>0 M4 _! H7 p* l2 H7 g+ c
<div id="app">2 ~+ E* {0 X( d" m3 s
<!-- nav -->
/ n3 D3 i# R( Z8 @ <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo" / h" \( e: P8 \. v) j
background-color="#545c64"
) L5 _1 Q4 |5 g( z: _ text-color="#fff"
; m0 E; L" h3 k z, X0 E- X active-text-color="#ffd04b"# G! n/ `. v4 Y- W: F
menu-trigger="hover">7 w) N$ e5 W0 H# r7 }. |+ j
<el-menu-item index="1">Data View</el-menu-item>0 y' }# Z. y" k) {; X
<el-submenu index="2">
( L: i2 @0 k5 _5 S- R <template slot="title">Data XX</template>
7 t. M' ?7 \& w <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
, K/ S; t% E V <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>+ G6 m) v& u" m( t+ N2 L# r
<ElMenuItem index="2-3">XX Data Collection</ElMenuItem>1 r5 j: r1 N0 d
<ElMenuItem index="2-4">XX Data Collection</ElMenuItem>9 J$ Z3 C+ f! b
</el-submenu>
& j9 n$ o9 D. Q) o! K/ { N <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
2 J8 O) C) ^5 G" T </el-menu>% w2 b) e, c" J$ p5 U. A
2 p# U( a$ Y4 L
1 t5 I' I0 O# K
<!-- search -->3 U, z/ ~# [8 N. ?' m5 \, {$ ~
<br>* |4 Y! E( e) \( L/ C: D/ e1 S
<el-row>8 B- j; A$ C! [
<ElCol :span="6" class="grid">
! H7 V6 h7 ]5 g2 g% n; N5 c/ U <el-input v-model="input" placeholder="please input the value" ></el-input>
# |- A" C+ o, B( q; x; t+ T </ElCol>( G# Q9 ~7 E& ^6 }5 A
<ElCol :span="2" class="grid">
. q7 B- [2 [ {7 j% K4 }2 U8 W <el-button type="success" icon="el-icon-search" >Search</el-button>( F; {3 X% O4 d& p, f$ R
</ElCol>
& h' n& \& P: c4 }</el-row>2 P% X7 t' r4 _2 ~) B8 d/ t
<br>+ @8 `% ]6 ?8 Q: l4 O
" Y* x; _# K; S* x' a: e: S
<!-- table and operations -->1 ~4 b- T# E+ \2 n2 u5 H
<el-table
: U1 q" x2 l: s& f9 w:data="tableData") L! F, @' U) n0 Q* v' h
style="width:100%"
2 M9 c+ M- j$ M4 F5 J, V; K# \stripe
* n% h8 d, @% I& |+ ^# [>
5 K. V1 V$ @8 l# d, {<el-table-column fixed label="Date" prop="date"></el-table-column>' g+ n6 c0 e. D, W
<el-table-column label="Name" prop="name"></el-table-column>
* d7 M7 X3 X! ]6 W, d8 T<el-table-column label="Address" prop="address"></el-table-column>
" p3 P8 K: y% U<el-table-column align="right">, h( }$ j* }5 X! v
<template slot="header">7 V( Y8 n' _) A& |
<el-input v-model="search" placeholder="please input the keywords"></el-input>
3 a7 F7 t2 Q- ~1 w7 t, r</template>2 U* f6 B' a) x$ \1 x' e
</el-table-column>
6 P2 m9 ?5 g# n! Y) y" s. O
, Q% p d8 D9 I9 c1 _( F<el-table-column>% u3 z- }6 R Q4 k- W2 C
<template >( g2 M' ~! {7 u! L! a
<el-button type="primary" icon="el-icon-edit">Edit</el-button>4 p9 A! j+ |! @
<el-button type="danger" icon="el-icon-delete">Delete</el-button>, \+ _1 [% o( U; x
</template>
4 V5 |/ u' y0 {( g</el-table-column>8 R4 A5 A) Q r( o" o4 d& x
</el-table>
. Z, M4 Y* _1 \$ s0 M& I5 g
( P h. \ M; c( r7 Q! t<br>4 G* s0 ~) X& C$ M F: b6 O/ w
<!-- Add new buttons -->
; c: q7 I6 p3 |/ i( l0 y<el-row>3 G8 v* ?- d+ {/ G* i0 a
<ElCol :span="1" class="grid">
" c6 w8 |( z; D+ z8 p <el-tooltip effect="dark" content="Add new information" placement="top-start"> q$ C6 w( D, j. {
<el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>+ {0 S$ ?6 ]! u2 k4 A- \% ^+ K
</el-tooltip> j$ V, w, O3 n/ P! X* ^+ u
</ElCol>$ D5 J! B0 f E; |& T
/ e; v9 ?9 E4 X <ElCol :span="1" :offset="1" class="grid">' [/ q- u5 E* q5 a, i% v
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">$ I- K. d% f* l* T& h! K3 [ }
<el-button type="danger" icon="el-icon-delete">Delete All</el-button>" W/ B! k; w) @. Y
</el-tooltip>
- k9 W5 s( W8 X- M </ElCol>& ]9 M$ z @) V8 i) d3 m9 o6 f* _7 D
: F) ^) W8 B" S/ R4 C. {2 ^</el-row>3 P0 W9 W& M P, }( p- Y/ X
7 G5 _9 S4 G+ w; v6 G! M4 Z<!-- Page split -->& b$ p' F# H$ a( V. i6 h2 u) J
<br>
6 r! Q; i0 i$ Q7 [! _+ i# |9 [: E
<el-pagination background % h. t; v, T6 `% g
:total="1000"
- D; U3 `8 }; j9 X/ a$ b3 k$ f layout="prev,pager,next">" g2 n) x7 w0 z0 C5 ]
</el-pagination>) g% @" W! \+ ~% E+ H: n: m
8 o: Q' i* d* m0 h$ B' F' o
( G+ u) c- b- t7 l) M7 U4 e* s% o. m- \' W4 I
</div>
0 C) U$ f4 l2 @, l* u. @) l+ |</template>. p1 R$ t* T, m0 N% T
, X! j- T: e9 s9 u+ ]$ C<script>% `0 V( U( F, }
! `* n1 t. E8 h1 K9 i6 A1 b8 I- g
export default {
7 v5 ?6 X5 X2 M name: 'app',
/ q' L( d; s6 q U) x data(){
1 `5 ~" n w+ O; [, j, h return {! |: {8 b+ ?; J$ u6 Q0 J$ J; U
activeIndex: '2',
1 o' s, y" E2 o$ k( Q" M" c url:"http://baidu.com",
q& S% N9 C7 R: c tableData: [{6 j2 n' |2 s% }* y4 I3 X& o. K
date: '2016-05-02',4 T9 `& R1 X1 s5 A7 i- @( }
name: '王小虎',9 O4 G, x; ?4 V% e
address: '上海市普陀区金沙江路 1518 弄'8 x/ H) h( i+ L% b5 A
}, {
& Y4 z$ [7 f* s- o date: '2016-05-04',0 t6 S# a& x* p
name: '王小虎',
: l6 `- p' o$ `" Y1 G address: '上海市普陀区金沙江路 1517 弄'
" y" z# X8 {8 m1 N1 ^ }, {
& Q" T! ^* z6 _8 t% `- @: a date: '2016-05-01',
/ y- C# A; `. V$ H" X( O0 m name: '王小虎',& d' E( t' G- ^" x$ j
address: '上海市普陀区金沙江路 1519 弄'5 ^' O U0 H. K- z- Z: ]
}, { X1 x: A/ _( l& H# W/ T
date: '2016-05-03',5 B9 ]/ `# @7 G: z$ ]& p
name: '王小虎',/ i, k3 r. I8 ^5 l2 K: }
address: '上海市普陀区金沙江路 1516 弄'" T7 |1 ^2 m v+ O
}]0 `7 T( N- h' w5 |1 x
}7 B2 N- S9 `$ A. C# g+ a% | P
}
H/ _! I7 o+ ]* z5 q8 ?" ?4 G}
. @5 N+ k- q4 b8 D/ w: |1 e</script>
% X# K$ u$ R: ]/ c7 p
1 o; N; I- S+ A* }2 _+ @<style>
: f& h& u7 ^2 \+ f #app {
6 p! r$ h' \% U9 w P font-family: Helvetica, sans-serif;$ w6 H* q) v O. c" J z
text-align: center;$ l! E7 L2 }! |5 V' ~' E) x
}2 \$ h C5 c# D8 x
</style>
8 J0 R) ~3 t0 X; _9 i; m
* V5 X% o" v2 I# X! L. T
5 ?) E) B5 Q) J1 I& u; W! J* R, }: l3 H |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
