PLM之家PLMHome-工业软件践行者

[开发视频] Vue element-UI开发学习---单一页面学习

[复制链接]

2019-3-18 15:13:56 2406 0

2470

主题

1275

回帖

8万

积分

管理员

PLM之家站长

积分
82162
QQ
发表于 2019-3-18 15:13:56 | 显示全部楼层 |阅读模式

请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!

您需要 登录 才可以下载或查看,没有账号?注册

x
Vue element-UI开发学习---单一页面学习
' X- `6 P- P7 c3 A6 \4 }" _# {6 P# G6 D7 a; e
捕获11.JPG
, `. H) z9 s/ U1 `$ j* x2 {2 s
: K: E$ l+ e2 C! Y% M<template>0 Q5 s9 d* v; K3 ?6 t& ]" ]
  <div id="app">
5 m2 F; E3 j6 x4 R$ r" C, }0 q <!-- nav -->
& X) r4 `5 H5 `2 W' E2 [! M; D4 a8 i <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
  w1 k! e# \. u. i8 ]  background-color="#545c64"
3 W: C/ p* m5 w0 S  text-color="#fff"
5 i  e1 b3 N: B( {% q: @9 |- T% C9 _) P  active-text-color="#ffd04b"! K6 _7 A, m( r  R( J
  menu-trigger="hover">
& T: x6 F" U# X2 `* U' E6 E) J) A* m    <el-menu-item index="1">Data View</el-menu-item>5 ^9 J# g# M. N: c
    <el-submenu index="2">
7 x# s- x2 _( Z, d, l8 Q      <template slot="title">Data XX</template>
6 c& V3 K* [$ `2 _7 M      <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>! e6 W4 N' I" r; v; l6 P% r
      <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
/ }7 @1 w  m, O  e0 P6 b      <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>8 o  l. G* M0 |
      <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
) j; P$ x. }1 c    </el-submenu>& T9 W! I- Y8 w4 J1 e1 h% }* ^
    <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
; d  p+ p9 z! i' N6 [5 X1 A </el-menu>
( \$ d: U1 [( d" A) b& k, ?+ E9 @; g% x/ R1 ~9 I* S& g
) Z- `8 T: q$ H9 g# ~
<!-- search -->
4 b4 z4 L5 J. D8 x0 U <br>
1 b9 O2 [& I& E8 ~6 l<el-row>. [  `0 k7 y# o, U; B
  <ElCol :span="6" class="grid">3 ?7 ?+ T1 O; h4 Q- P
    <el-input v-model="input" placeholder="please input the value" ></el-input>
5 z- x* p' c9 _5 k  T% a  </ElCol>: o8 A1 L5 `+ u# \# m+ o
  <ElCol :span="2" class="grid">* L! R0 B& n8 c
    <el-button type="success" icon="el-icon-search" >Search</el-button>6 d7 D' A% F3 W
  </ElCol>. R' T$ d  D! M- a0 t  D
</el-row>: i# t- u, i$ |' b) d: U
<br>
. R( T  x: i- f# d
' H- y8 g, v; W' l, u- P. s( e. z<!-- table and operations -->. y4 R# W3 Q, t3 b8 z  d4 v4 z
<el-table 6 e: H* l: N! S' Y  z1 p" `& Q
:data="tableData"6 x% U" g  M* A% h1 i# j# W
style="width:100%"
0 ?  p# V7 Z: V  w6 `+ w, T6 d/ [stripe
4 R7 M8 ^6 H; h4 ], I& t1 u+ D>
2 H8 _- v7 O' c) ~& ]- B<el-table-column fixed label="Date"  prop="date"></el-table-column>
" ?- w5 {7 z2 s1 X<el-table-column label="Name" prop="name"></el-table-column>
: J0 d( p& d: v  C! V) k% v<el-table-column label="Address"  prop="address"></el-table-column>, ~4 K$ p7 h3 t, X& P
<el-table-column align="right">
! P( M3 F. p6 D7 B7 [" y<template slot="header">
& a/ C. T7 P. b! [ <el-input v-model="search" placeholder="please input the keywords"></el-input>
& S* U* d9 v* O</template>
) U& K  K( Q5 {- D$ v8 c4 q</el-table-column>
! d# Z$ a) J5 o6 G4 S& p" L2 h: e6 \' x0 B
<el-table-column>
1 T$ w9 n; b1 e. P<template >
, g/ ~% P; f- g$ _/ Z% ]' R  r# ~  <el-button  type="primary" icon="el-icon-edit">Edit</el-button>
# f! @1 F8 j$ W. m) {( f4 i  <el-button  type="danger" icon="el-icon-delete">Delete</el-button>  M  V4 ?7 Q6 Y8 M. \/ a
</template>
5 i- R4 S- e3 s6 q8 z0 R" V</el-table-column>
0 }( t: K  O1 w! z; s5 X7 R; q</el-table>
$ `# D; S5 C3 V& M, t7 i& j) _. [+ t; n5 P
<br>3 b' W% d1 o+ m4 o
<!-- Add new buttons  -->5 ~2 D4 e2 l) P- j5 A) O6 E4 i
<el-row>
- c  S$ b: Q3 m1 `8 R- L  <ElCol :span="1" class="grid">! O  c! u' k' h5 p' y$ h
    <el-tooltip effect="dark" content="Add new information" placement="top-start">
! `& s4 J2 g$ ~, G. O; f    <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>$ L/ J  u$ v+ Z9 J- M4 ?
     </el-tooltip>+ j$ {3 U0 |+ P" p
  </ElCol>
0 h" F1 H- U+ ]0 y# j7 @5 T* z" |; c  E% x) @1 U
  <ElCol :span="1" :offset="1" class="grid">
8 c: l! X7 N2 \; l3 Y: T     <el-tooltip effect="dark" content="Delete All The Information" placement="top-start"># y0 [, h5 U$ y' |$ m) ^( a) M
      <el-button type="danger" icon="el-icon-delete">Delete All</el-button>. J* r$ g+ `9 o
     </el-tooltip>" H, f# o8 H+ W& d4 }: D  E% z+ w- K
  </ElCol>
2 \2 q, }) p( A- g5 t; Q4 G, [; K! G
</el-row>
3 O, o2 X! m3 i1 V& U
4 q2 o- ^6 r/ D0 u5 x- u' |3 R<!-- Page split -->' J7 ?6 B' \: I5 m1 k
<br>& t& g- m3 ]3 j6 T# ^9 y7 ^
  B$ i8 f* O" b  V. g
<el-pagination background 3 I0 O% t  n7 U/ L% z& f
  :total="1000"% F. C" t' ~* p
  layout="prev,pager,next">& Y0 ^& v" H, n1 M9 l
</el-pagination>" Y0 P. H" p+ u6 C% B1 x2 L
! D0 N  G/ `+ T  a

) N4 @0 O& v+ ~& H, [7 b6 d& W! U* m1 {, f$ |9 P0 M+ @
</div>. s3 S' m% Y9 b4 G
</template>
& ?+ H4 \4 ?5 r$ V# f! A9 c8 p, Y3 t0 t- Z: f5 D
<script>3 `2 p6 m! E  v& @6 [' M

; k# A2 c3 L: @/ B1 M; n9 M, n( jexport default {' w4 J4 J( f$ q) i% d- Z1 @
  name: 'app',
, Z3 K2 ?$ i/ M, O1 T$ K  data(){
7 |5 N# R! M7 J$ Z! X$ _    return {1 E* s! t' z" u6 o& m' w
      activeIndex: '2',0 a; n# I8 X7 Q% \8 k# E
      url:"http://baidu.com",  k+ p( h5 ]- G& |* {% I
      tableData: [{
) A* I# ^8 S: e, T& U9 ^" H$ b1 q          date: '2016-05-02',  M" h" Q  \" ]( V$ f8 f- c
          name: '王小虎',3 U/ y8 K5 g8 m; z3 j
          address: '上海市普陀区金沙江路 1518 弄'
' m: d& v$ h  u: G( j9 p; C        }, {+ N$ u& j6 [& |: y" R/ I
          date: '2016-05-04',& K/ H) L! |' K8 @& d
          name: '王小虎',
& @( ?- H/ y# j& i# _          address: '上海市普陀区金沙江路 1517 弄'
6 b2 a+ G2 W2 E$ B# s        }, {+ M* q! G4 H/ a6 F* s7 z
          date: '2016-05-01',
6 ~% T. s: D: a3 B          name: '王小虎',' \1 U& U# t4 w2 k- u4 y6 Q# a
          address: '上海市普陀区金沙江路 1519 弄'; P$ U$ ?* B. h
        }, {
: O$ E9 V  G! Z; M# O          date: '2016-05-03',
2 J$ Q: A- F5 M- D3 _) \          name: '王小虎',
0 M) i( i9 U  Z4 Z  H$ y# A          address: '上海市普陀区金沙江路 1516 弄'
1 P( Z# |5 u- s- N        }]2 D* R: G4 |2 a$ k5 l6 L
    }. t1 ?! @  N. N: ^6 P" h0 ~
  }
5 v) S: S$ I" r9 E6 k) i}
/ u! Q* J" m- b# W" I- r</script>' f6 b6 P/ S, Z4 O: w
6 g; R; ]6 d" H) ]4 r" {/ p
<style>* Z; e4 i4 U- r9 F/ s
  #app {2 e% G; N( C5 Y, V$ _- Z
        font-family: Helvetica, sans-serif;
4 s$ E5 U) W' y6 h+ c        text-align: center;5 a7 d1 @' R$ X/ }+ I7 C2 u
    }
6 j0 J1 N( Z5 e</style>
( s8 w* y% n& E6 b& \  S3 }* Q1 V$ }0 \" s$ T7 F5 A( C, ]0 a
! d# F8 s8 K( G# v7 d5 m8 E
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 doTeam.tech
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了