|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
Vue element-UI开发学习---单一页面学习
7 P: r8 p+ Q/ u4 u( G% F2 U1 L- K" n6 m- s
' f; O# r& v. `1 v9 N/ r+ |
: p1 R: T! Y' `; w<template>
& F& B5 L: P; K0 H" { <div id="app">
! D9 T0 _6 e* t2 O <!-- nav -->
, U3 _: ?! z( E <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo" $ D" v' B. D' U$ U
background-color="#545c64"
" p; o/ b! j8 s' U+ } text-color="#fff"" s* _1 ?' g; |% r+ h2 |; C
active-text-color="#ffd04b"
2 {& q' q5 x% x( w menu-trigger="hover">( s/ E3 p; X: X2 E0 J1 z# }
<el-menu-item index="1">Data View</el-menu-item>& f) r/ X A# b6 O( C
<el-submenu index="2"># Z/ H( b# R, m$ w8 U( f$ s
<template slot="title">Data XX</template>/ q% _0 b) m6 m; E) T; Q
<ElMenuItem index="2-1">TC Data Collection</ElMenuItem>" V: I+ j. F' N3 {2 y# }; X, G
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>) w8 M- J L' }) _' O4 m; G
<ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
5 M' S1 ~% s( L& S <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
) F) x! W! I9 S, j! B' m </el-submenu>* K2 z7 Z$ q% n u. P4 a
<el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
3 A J W! ] k) i* Y1 k' T </el-menu>+ x, R4 e4 M l+ I3 p8 B4 Q: Z
3 W+ _: @' `; p) q* E" v
" d% |$ ^4 Q( B: H; w4 ~2 u <!-- search -->7 @6 e" ^- \/ I: M
<br>' d7 u' }+ y& |
<el-row>
' d2 ^9 t. c6 W a8 V <ElCol :span="6" class="grid">+ \3 C$ h* W% V4 h) N
<el-input v-model="input" placeholder="please input the value" ></el-input>1 S4 x$ Q' Y" x$ D
</ElCol>6 \ h" q* g- `
<ElCol :span="2" class="grid">
, S4 M4 {. t. h0 l' l! n <el-button type="success" icon="el-icon-search" >Search</el-button>+ x7 Q% W/ F7 f8 s! q
</ElCol>( a/ W/ v* C1 T
</el-row> L- |3 R$ R$ F( o( i! f4 o# e
<br>
( d0 L9 m3 q; F* ~; D1 A6 I9 G; j4 D$ {- Q5 w
<!-- table and operations -->8 p4 j5 V! R! j5 i
<el-table
6 g& N( n( h; [8 x:data="tableData" r5 _; ] u1 z& J1 U' p$ T" s
style="width:100%"5 A0 j' n5 a" z& y$ p* t
stripe# G. y. q& C! N5 {' |* B
>
w4 `& \: \# X. D; B4 Q2 s<el-table-column fixed label="Date" prop="date"></el-table-column>
1 t$ V, {9 M1 Y; ^<el-table-column label="Name" prop="name"></el-table-column>, |) q1 m5 b2 S$ O5 c( _" u
<el-table-column label="Address" prop="address"></el-table-column>0 g) ~/ c6 g; ^" A
<el-table-column align="right">
& l4 h; D7 |9 N7 R( H<template slot="header">
M* T- l8 o v x <el-input v-model="search" placeholder="please input the keywords"></el-input>
. O; a" J6 ^- I. c9 i% e3 W1 u3 Z</template>
8 O/ p. j( _/ J/ E& _</el-table-column>/ v5 T! Y/ \5 [+ S# i
2 } ]+ Y7 C1 u* A, f: A! ~<el-table-column>
U2 q' s! J% L7 o<template >
! q- Z6 Q6 [9 {$ M0 S4 b' W! m <el-button type="primary" icon="el-icon-edit">Edit</el-button>, }6 V9 d9 J1 b
<el-button type="danger" icon="el-icon-delete">Delete</el-button> w( C+ h% U+ x$ F3 b. u5 K
</template>
/ ]# X" N0 B: u* ^2 y$ ^</el-table-column>
* e4 H$ `9 E7 K. {</el-table>6 a N0 ]0 @$ O. z9 Q/ g4 o
" ^+ ~' g; Z0 ?4 r( V; c5 F
<br>8 Q: [& w; m% J- n% s) I
<!-- Add new buttons -->
) \" W9 L+ _+ i e9 h4 B" x& j<el-row>' z+ A- x6 u, R7 r# j0 \! [8 r
<ElCol :span="1" class="grid">
: W2 H7 W# N# T+ ? <el-tooltip effect="dark" content="Add new information" placement="top-start">
7 F6 y2 d5 y. s" \' m <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
j+ o0 v; }; m0 S# z; b </el-tooltip>3 m. T( Q8 }% R/ f+ A
</ElCol>
{/ z2 ]; M+ Q' K* U& b4 `
# |/ I; e2 }. {" x+ P$ n <ElCol :span="1" :offset="1" class="grid">& Q) V1 [" J! ~' T5 }7 P- {' _1 T4 [
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">/ o8 N& S% O7 B5 X+ z* [7 p
<el-button type="danger" icon="el-icon-delete">Delete All</el-button> U9 m& e) T# p2 Z
</el-tooltip>
9 v {) D2 n2 k( e9 o: [ o </ElCol>. n# M0 I, q, o
' N- \( r( H7 R- h4 Q/ P5 ]
</el-row>
8 N: N5 O- I) N" n, M$ C* C3 Q* D3 L# \( B* h' V- {5 q4 }3 T
<!-- Page split -->
# N. J2 M( M, B- O<br>
3 }: `0 |- D) I3 h1 |; m+ o; {# a7 S5 ?+ c; _6 T
<el-pagination background 3 L' s2 i' W. A+ A2 |9 E3 T: k: A! F
:total="1000"' D, H/ ? Y6 Z# t
layout="prev,pager,next"> |- |3 Y L6 z, Z$ f
</el-pagination>
0 [8 j# F7 b- O
; [. g5 G& v2 F" K7 l; d' F! {
6 s, H$ I) y3 X0 A7 Z# [- c; O
0 p Q0 W. [7 m</div>
7 i! R) m0 S7 ?/ h' A+ B8 V3 b# }</template>
: O/ z5 v, j( S \$ ~
3 `; P* |. y5 @<script>& y; _- z( E- y4 z* O
3 k9 @0 N, h: N6 T8 C' Y+ \
export default {
. F' d: e# `( [4 E0 o6 Q; T0 O name: 'app',
7 Z. Q7 G( F4 F6 V$ H% N) s data(){
) Y) M+ Z3 o' Y return {
) Q% F' l/ m/ v! k. G activeIndex: '2',
, L* i' I1 x+ O R8 F url:"http://baidu.com",
6 O" ?5 A) M+ X tableData: [{; Q' ^" ^7 ?7 V0 g9 }# y
date: '2016-05-02',5 w/ t& L' ?1 w# @2 w
name: '王小虎',0 m+ P, T9 f& o8 h4 ?# s
address: '上海市普陀区金沙江路 1518 弄'+ \" X$ ]( D- l3 w7 _% e* a
}, {! D: o0 m0 q. S; B O7 ]" A
date: '2016-05-04',+ R' B+ |) u( |: Z/ x0 ]' u
name: '王小虎',
; G0 \* g5 P7 B& { address: '上海市普陀区金沙江路 1517 弄'
4 \' f+ [+ U) W2 A/ E }, {3 @( g: k8 V# N
date: '2016-05-01',
0 x! ~ f C& A, u1 N name: '王小虎',
^$ o0 z8 h( m/ h( _9 h9 S address: '上海市普陀区金沙江路 1519 弄'2 t) z$ }0 Y2 `
}, {
. y7 d5 Z0 B/ c$ \ date: '2016-05-03',+ o% ~7 n! \* A( S
name: '王小虎',& e9 r; o% ?& z0 B
address: '上海市普陀区金沙江路 1516 弄'
) q% y( R) H/ t$ K; n }]
3 X3 {" ~0 R0 e }+ T5 g- w" s( E. u, W
}
) L- X" U. ^3 R) B- h$ X+ w}" \( U3 o8 [5 ~$ t
</script>5 p2 j! i. x7 `# C; r
" ]2 S" X# _1 h" K* {2 l! X<style>& O& ?6 z/ x) P* g
#app {
2 G4 s2 t( t6 W% @: }# a F G font-family: Helvetica, sans-serif;4 {4 K. n; m2 \- u
text-align: center;
9 W3 L$ r! S3 \/ n. E. R8 ~- C' M }$ t, U2 F+ B& b3 M5 L1 ^ Y1 ^
</style>
% k8 a7 Q& V9 A; f$ }" a0 _9 r8 f5 u5 D& |. e( K1 P$ o
) a- m7 P- Y/ U9 E
|
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号-1 )
发表于 2019-3-18 15:13:56
