|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习* w. `' V3 }5 B% \3 M. ]1 K: h7 H8 R
+ z; c5 E$ s) e9 v3 ]
/ c: U' n6 T( C) G
+ b$ _1 l; h0 I3 V<template>
4 z8 ~9 i6 V6 o- q! V <div id="app">; O# S0 |& e# H
<!-- nav -->; Q6 I5 `( e0 @$ h' h' y
<el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
9 Z2 R% x- l# J& M2 |$ f8 y background-color="#545c64"
9 I: Q |( b& f9 z; p+ A: V1 S text-color="#fff"
+ W% \! {# w1 P: b, v1 L8 d active-text-color="#ffd04b"
' f% u; t! P; V2 P# Q. }( X3 z" j menu-trigger="hover">
/ m. m. P c/ r/ c/ @8 ^& H, n <el-menu-item index="1">Data View</el-menu-item> Q% \5 [* x* A1 S
<el-submenu index="2">6 D9 k" Z- _8 t4 [5 h
<template slot="title">Data XX</template>
% q% I+ |9 q; n" i9 M <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>% l' `0 z! t* j. }3 e. c
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
: w/ I! v9 R& U0 G/ v9 u8 i4 u <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
9 Y, T. B3 G7 N0 ^$ Z' k1 _ <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>: g% U0 m# \6 m$ I% N
</el-submenu>
8 W+ s1 B6 P' ^( R* Z" { <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>1 p | o8 x; u {1 o
</el-menu>
5 {( y' C4 z- M$ @9 \; f
c9 x$ C5 |9 _* p, o+ _: ]6 m3 e2 T. u" Q! F& o
<!-- search -->
- D5 l: J" r6 Z) p9 ~+ K/ H0 ^+ t <br>" I6 W/ t4 Z, k1 `; C3 W
<el-row>
) A @" _7 Z/ A4 n1 z <ElCol :span="6" class="grid">
1 @, O/ ~3 g0 `) N& V) p! K0 Z <el-input v-model="input" placeholder="please input the value" ></el-input># z: e( _4 B8 \$ p0 U
</ElCol>4 Z2 Q: n$ Z( k6 K
<ElCol :span="2" class="grid">
2 n3 U% u5 y( A' K& n; w <el-button type="success" icon="el-icon-search" >Search</el-button>
5 J& M+ i- U1 g& G: ~2 V </ElCol>
2 i6 E e6 Q. u9 _# w4 p</el-row>: t3 b9 u1 l# }4 H9 f5 f
<br>+ a) C& _ c! W2 G
/ b/ j% B0 ?- a- w- [ D9 t6 [7 }
<!-- table and operations -->7 u# t' n5 T* i4 _( z
<el-table 1 n+ [) j5 _3 q" |; O1 a- n' E
:data="tableData"
: k" b$ M6 O8 i" ]1 V& istyle="width:100%"- z3 q. v5 g, v* o" S& q
stripe
" ~1 ~- v" a, I4 A0 z+ g>, v9 z0 H0 C+ s& e
<el-table-column fixed label="Date" prop="date"></el-table-column>& ~& o# @0 N# i7 u9 z; @
<el-table-column label="Name" prop="name"></el-table-column>
) W9 Y: b' ~9 C7 U$ Q, G- ^; S<el-table-column label="Address" prop="address"></el-table-column>8 H9 q2 v r* c% z/ y; o
<el-table-column align="right"> C4 ]. h1 c: }3 C" J
<template slot="header">
0 f* R# F7 z: C- A( [$ U <el-input v-model="search" placeholder="please input the keywords"></el-input>$ S8 R P/ y3 s, p$ Z- W
</template>
0 m! E) U6 A& K* G</el-table-column>
( o5 d. w* h4 j+ p
% X& b6 a# _' ~% }$ _<el-table-column>
5 y0 a) t/ K+ B3 h( x<template >6 A4 |: c8 @% n! n7 r
<el-button type="primary" icon="el-icon-edit">Edit</el-button>
. z/ j+ k4 w- [) c4 X <el-button type="danger" icon="el-icon-delete">Delete</el-button>- }4 r& Y8 R9 {2 ?- a& p- ~
</template>
j, I0 A" [6 w" @: W) A</el-table-column>
! H- X3 ]- x9 K4 S, ~$ s</el-table>
* U( q% g& @. p1 ]: T2 j( p Z: F4 i; y7 ^$ H! F3 m* z
<br>* ^% n7 e: [- k: ?4 z8 U0 V: K
<!-- Add new buttons -->- i/ `' [1 e8 ~6 j3 k
<el-row>
F, d+ y. F9 G1 P! j <ElCol :span="1" class="grid">. \/ j$ L5 C% F& J
<el-tooltip effect="dark" content="Add new information" placement="top-start">
/ n" r6 |' E9 z) u, [; R/ y <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
" A6 G4 L7 g2 B# M& } </el-tooltip>- F+ Q7 ?1 }: \! f) Z
</ElCol>: {6 ~2 R4 t) L% u! S! ?
. G" Z/ D8 l& a& R: m$ k: }2 i/ _ <ElCol :span="1" :offset="1" class="grid">0 U0 F6 `: c2 A7 o5 z2 H
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">' A) Z7 g6 x, |6 O# J
<el-button type="danger" icon="el-icon-delete">Delete All</el-button>
+ n) b8 H" D$ y0 k' P. Q </el-tooltip>: E' `9 u) c, e& W( g
</ElCol>0 b# a" q$ O1 z
1 c( v5 K g" k7 ^" K+ t4 h
</el-row>; F$ f% U' ]; `
) _. V$ [- ~! W$ N, }3 H T
<!-- Page split -->
+ u( d/ T9 {! o1 f<br>% }# w/ r, x$ A K
% o7 P, _' _7 s) t+ S9 Y/ n1 `
<el-pagination background * D1 z, p; H: M
:total="1000"
- x3 h9 u% \" s8 N1 F( [. d# j layout="prev,pager,next">! D) ]! _; T! B9 F$ D
</el-pagination>- t. F1 a) O' b' }6 {) i& E
( Z. U% N9 @1 n. n' m
, _9 y& `2 o9 N' q3 c3 X# k! J
3 j( l+ v1 X8 A</div>; [, Z% Z- ~) {# w( r1 o4 P2 L
</template>9 E# s( S" E R0 G
' r( E+ a" C. F: ]! W<script>! c I* X: F: n8 p) J5 a" j4 w p
% |& p# O# c. B' A. Q
export default {, F7 N! w) _, j6 m. ?1 ?
name: 'app',
" ?% W) [: `' ]8 F3 p, Q data(){
7 C9 L: }/ F$ q2 S return {
: d9 g1 S% w7 t activeIndex: '2',0 C0 f; X4 [6 m% _8 s
url:"http://baidu.com",
9 i# V3 H" B: L tableData: [{, i5 B7 t. Y/ _! E/ z
date: '2016-05-02',
' I* u$ {4 c/ l, d- D& J: h name: '王小虎',) u9 d8 i5 \! {/ |# S" ~% ]8 T
address: '上海市普陀区金沙江路 1518 弄'
3 ?4 q3 b% j8 i1 y+ E' s* ^ }, {4 {# Q9 J8 x- B# W
date: '2016-05-04',2 o/ ~, J4 J% O6 g
name: '王小虎',. _6 @ ]4 N( L7 ?4 w9 c3 t6 T
address: '上海市普陀区金沙江路 1517 弄'
2 y8 o/ ?% W+ t }, {7 S# q+ x" M& Q. a9 f; X; h% {
date: '2016-05-01',. S+ F8 O& G X, m l
name: '王小虎',
6 H4 l2 R+ t( V, E; g4 ^6 Y address: '上海市普陀区金沙江路 1519 弄'
' n [0 j/ a( [! ~ }, {
* j, i% Z+ o2 A0 s0 l; g, P- j1 K date: '2016-05-03',% E4 T5 V: J& A/ {+ T4 W
name: '王小虎',2 g- i4 t* x( `
address: '上海市普陀区金沙江路 1516 弄'8 N- w- w8 Y- R
}]
' p( I5 F/ {) ~8 T- x& o' g }
, R' }+ N/ ^, b }
5 L3 K8 ^6 S/ x' ^2 f& g' F; F9 |}2 b, B: O/ |. b
</script>' j, u* B* U# q% k. D. b( Z
8 d& Y. f3 q g) G/ j! W* J<style>
0 S, k8 p- k$ O* n) s #app {
% m7 X6 ? A3 {( H- E' k0 g font-family: Helvetica, sans-serif;
9 C+ q( |8 e% ~0 A; t text-align: center;) o4 Z. D" \. J2 } {
}2 h) a+ V( j& J0 u7 Y2 P k
</style>( m9 v/ U' i: O1 Y3 p; R9 L* `
) r0 @- ?' t& n& t
* P* x+ `: ?. S/ e- v
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
