|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习) k Y& M1 r. c0 P
8 S6 Y- d6 D- q, Q( Q$ ^! O
5 W5 L$ a1 J& ?: V' [* @
! Q3 m) n1 e" r# r( K
<template>7 X# d7 r* N+ d+ K: A" _1 O0 k+ w
<div id="app">/ S, b) v, u: y: v. Y O- `5 v9 y
<!-- nav -->
% F2 Z) H2 t: {) S" n# A& Q0 p <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo" ( ^: \5 d! Y6 k, G
background-color="#545c64"
0 h. m) ]/ V( d0 C text-color="#fff"
- z6 k R2 ]# D6 p active-text-color="#ffd04b"
$ N9 N, F7 ~& I" K+ f, b menu-trigger="hover">
* l$ X. I( E( R! b9 r; F <el-menu-item index="1">Data View</el-menu-item>4 {$ O5 ~0 _, J
<el-submenu index="2">
6 r9 |; W8 Q/ S; I <template slot="title">Data XX</template>$ M6 }! L& B% \# J! x# s, O# X
<ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
7 N+ k8 `0 F& D1 s <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
- x( t2 y7 r# o4 L" T <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
' N/ d( y& E, S6 B <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>* A% o' \* ~: g8 W
</el-submenu>
( f/ b$ J: Z) a5 H <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
$ H+ j* {( P6 i6 V0 | </el-menu>
G$ r# _0 }/ p% S$ i) }: {4 r1 W) ?1 I9 \: @' K
& V: S9 s' h* W; N) F/ [8 r4 V <!-- search -->: z0 H( J% [3 x
<br>
' c; _1 R4 x* i, R! l- n<el-row>
) O2 @6 h& b# d; Q9 a) v# U* d <ElCol :span="6" class="grid">6 ^4 R: |. n1 T2 M0 G; b
<el-input v-model="input" placeholder="please input the value" ></el-input>& _2 t( L3 x$ q: M# a2 A
</ElCol>5 q( Y6 [' B! k+ I
<ElCol :span="2" class="grid">0 k/ s( T: `( @5 `6 l, j
<el-button type="success" icon="el-icon-search" >Search</el-button>
/ \/ o7 H7 \3 y2 t7 a$ G/ |4 V </ElCol>
) `6 |6 M6 s# X8 ~</el-row>
1 C* N. V( V8 i. n9 @ <br>) S# a0 h+ }- @ p
3 N) W: T& [7 m, n ^<!-- table and operations -->
/ O4 q/ C( |% V6 z- o3 ~, X<el-table ! k6 m, o0 S0 u* u( q; d
:data="tableData"% k% n, ?3 S8 w& p: I* E6 m( z3 E6 |
style="width:100%") |4 ~; {1 C* v. ]/ {( J" U
stripe$ M1 i5 ^ X( e" Q( X
>* O) S. S: B5 B6 L
<el-table-column fixed label="Date" prop="date"></el-table-column>
) y- m* z$ } P3 G2 u* y/ h. L6 g<el-table-column label="Name" prop="name"></el-table-column>
+ N" c6 g+ _' G$ c<el-table-column label="Address" prop="address"></el-table-column>
) g! Y: P6 a, I! ^) ^. C<el-table-column align="right">( C! n+ ?& W _' ^
<template slot="header">
: f& w' M1 s& c7 T( n% U M! Y <el-input v-model="search" placeholder="please input the keywords"></el-input>5 J/ s- |" f6 w' |
</template> p3 Y$ ]9 ^1 r
</el-table-column>4 `- G2 V3 w+ @5 K! S
% M" s" D& D1 K1 b<el-table-column>) F7 U. r& ?/ f( g; H! ?2 p T
<template >
$ d" R: U& V b" K' ^$ O2 c9 Y <el-button type="primary" icon="el-icon-edit">Edit</el-button>. r; [; `: @0 `
<el-button type="danger" icon="el-icon-delete">Delete</el-button>
+ I0 w$ _5 M* N5 A4 J3 l n</template>- v4 w( W+ {* P) N9 H7 D
</el-table-column>) v7 H) Y q3 S% L/ \
</el-table>; ?: ?! ]; h) B/ G- k. t
! E& C& M: A8 c1 u: {9 i<br>
3 x2 W/ {5 d6 ?& o' c' j<!-- Add new buttons -->
6 o, @* s+ B! [) M# u' @) O<el-row>
2 g1 Q2 W0 x8 g <ElCol :span="1" class="grid">6 u/ }4 N7 E& }+ t
<el-tooltip effect="dark" content="Add new information" placement="top-start">
$ Y: @. q v' F7 e <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>0 A; N, R5 N' x0 W" Q
</el-tooltip>
! z& O$ X% {( x P% ?( n </ElCol>
4 R3 l2 a; A( f3 P8 W3 ?8 _8 P- y& |$ N) B% ?9 W
<ElCol :span="1" :offset="1" class="grid">6 [6 ~0 l5 R8 K0 F7 B( o' g
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
3 e+ @8 n" b" r; [ <el-button type="danger" icon="el-icon-delete">Delete All</el-button>" A! M- k; @4 `9 s L2 H
</el-tooltip>
?5 A$ S$ `- G, ] </ElCol>
2 W* e+ Q1 A4 i( j" y; B* P+ {6 ^0 u
</el-row>
1 ]9 r( J; U- I7 e
; a" P' v9 Z& f3 Z. ^8 y: `$ {4 N4 z<!-- Page split -->
& i* _$ s8 n5 V1 |5 p6 |<br>; i& T J! ? z/ q. M c
1 ]2 Z4 ?$ _* ~1 a
<el-pagination background 0 H6 E1 k* D* `% C
:total="1000", w8 X/ M8 k! m. i: n1 u0 [
layout="prev,pager,next">
5 T$ z- J, w, U" H4 S9 x</el-pagination>, K: ~/ t. H3 u' X" V: l# k- |6 a
6 f/ |8 K1 r' O1 o0 @
. d# J1 N2 Y' k2 c* F( ?
9 x. M3 A+ E) j+ T- r
</div>$ c# g* u0 k( w( [" _* K
</template>
8 q2 m4 G* e- _
- v, c u' {' z; l<script>$ ?( y9 g- U- K% {# o5 C& d
* k& B( u" M2 Z. V$ U/ l$ pexport default {
% E/ ?7 I. ?- z name: 'app',
/ C1 p! f9 F0 P- O7 j data(){
% E# C% p# {$ C4 D$ J& Z$ o! b6 J" z return {
1 O Q- u; W( ~1 Y( F activeIndex: '2',
6 R5 _/ I H# I/ Z+ r. ^; R* ^2 J url:"http://baidu.com",
u6 ^9 A3 Q ? tableData: [{- G% A- h; D( g2 o3 K6 l) k3 \
date: '2016-05-02',
2 B. R! E7 b: Q name: '王小虎',, a9 P% _. v+ o0 L# }7 M
address: '上海市普陀区金沙江路 1518 弄'
1 {1 V* x3 U7 Q' J# P }, {( |5 i. V/ k: Z5 l
date: '2016-05-04',
. x; c6 q2 M7 o2 ~& {; L3 X7 y name: '王小虎',
/ O; Q- b! d j7 ^- y, I" [' O address: '上海市普陀区金沙江路 1517 弄'5 Z# U7 s7 S7 i3 N0 `: R" r! S
}, {3 \. @: c6 X0 B5 J# K
date: '2016-05-01',! ], q6 K: }" C) \1 Y' w1 [
name: '王小虎',/ }# D! `, e( M: Q. N
address: '上海市普陀区金沙江路 1519 弄'9 ^9 Q) ` R% K0 r
}, {0 E4 R1 \" H: ] x: o/ i. z
date: '2016-05-03',
0 C0 l7 d+ j9 K' o name: '王小虎'," z" `3 f4 b" N- `* l' `" K
address: '上海市普陀区金沙江路 1516 弄'
. Z. N( g" F2 v- Z- R5 t; G }]
- T' H+ P1 k/ W6 o0 m9 y7 _ }
( w5 O; c; @ n; @ }
: i5 a& r3 G/ m$ H}7 Z) r2 l, ^5 i$ @4 w+ A0 k1 U
</script>- Y0 n1 A' T7 F0 Y- [; s
6 x+ ]* }. ^5 T6 k p. P& U! F<style>. \. e( ]+ |, R# ?( G; J1 B: B G
#app {8 Z/ T0 ?; m: S) K
font-family: Helvetica, sans-serif;/ Z J0 ^6 Y( d2 U7 g# b
text-align: center;0 q2 }* C% p& D% \3 o0 t' y( l
}
+ s7 t0 _* |* Q6 x, K</style># P* P8 p6 v6 o! h( ]
4 K" R; Z [" w+ o" c, d( ^ A" G6 G7 D3 @
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
