Vue element-UI开发学习---单一页面学习

admin

Vue element-UI开发学习---单一页面学习
" }, W0 ]5 ^/ A% }9 ]/ J3 l
4 k/ u3 p# x& h0 Z) A
5 c$ y, @3 f# n/ E
<template>
. w2 q& i! r" Y% ]- K  <div id="app">
8 ~  l0 \  T1 f9 P7 S3 o. K! q <!-- nav -->
; `( `8 Y+ A, z% i8 _ <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
  background-color="#545c64"
- K5 R- p5 @5 X3 I  b: X$ G9 y  text-color="#fff"
0 i! ^, \! y9 P% b$ X6 {( m  active-text-color="#ffd04b"
: y2 F- p+ f+ `, |  menu-trigger="hover">
    <el-menu-item index="1">Data View</el-menu-item>
3 C6 s4 Q) j& n, ^; [, ^    <el-submenu index="2">
      <template slot="title">Data XX</template>
      <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
. n1 L! E7 y$ l      <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
4 P( O& L! c2 x% J  p      <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
      <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
2 |) D0 j- U( @: r7 v+ J    </el-submenu>
    <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
6 _' X8 l& z! u </el-menu>
" u. g/ R" y% J( o
+ n1 W$ o+ k0 v* q# o1 ^. E, R) a
7 M6 Q% E) S- n' U9 Q! z <!-- search -->
3 y: ]0 D& z( I1 X* x9 f( D* n <br>
<el-row>
  <ElCol :span="6" class="grid">
# }% q' I8 f1 Y/ w    <el-input v-model="input" placeholder="please input the value" ></el-input>
' I5 s- g; U2 C. N( y  </ElCol>
- b$ e% C% Z8 @1 \3 Q6 g  <ElCol :span="2" class="grid">
. L, {1 I  J5 }8 a    <el-button type="success" icon="el-icon-search" >Search</el-button>
9 B/ w7 }4 ]/ I7 L6 }7 A  </ElCol>
  k  U% A; b- _3 l4 ]6 a</el-row>
<br>

<!-- table and operations -->
<el-table
; Y0 k1 |! |! a) K4 D:data="tableData"
style="width:100%"
8 o6 T5 l4 R  u' M' ^0 G0 o$ N5 qstripe
>
<el-table-column fixed label="Date"  prop="date"></el-table-column>
<el-table-column label="Name" prop="name"></el-table-column>
6 [* Q/ ^8 J* e: @2 u<el-table-column label="Address"  prop="address"></el-table-column>
7 l" \! ^! w8 F5 o; T<el-table-column align="right">
& a( R! q' A# r1 H! H7 A<template slot="header">
$ {* o: `* W# r& A+ o" w# x+ q <el-input v-model="search" placeholder="please input the keywords"></el-input>
  u! v+ L: h' A4 s; Q* H$ \5 d</template>
</el-table-column>

<el-table-column>
8 \# V2 T; O% b( e# O- B: `<template >
  <el-button  type="primary" icon="el-icon-edit">Edit</el-button>
  <el-button  type="danger" icon="el-icon-delete">Delete</el-button>
</template>
" G0 q( X" V( `) f9 j2 G+ c. R</el-table-column>
/ ]( _0 K9 u6 w" ~# G</el-table>
0 k. G+ S5 Z3 d  Y
<br>
<!-- Add new buttons  -->
<el-row>
  <ElCol :span="1" class="grid">
    <el-tooltip effect="dark" content="Add new information" placement="top-start">
    <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
/ l8 v7 K$ A2 T3 n' j0 {: P     </el-tooltip>
  </ElCol>

  <ElCol :span="1" :offset="1" class="grid">
" k+ I8 N6 }& V2 D/ O( S     <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
' L+ ]+ [; |  J1 x) K) _* I      <el-button type="danger" icon="el-icon-delete">Delete All</el-button>
" E' z* ~1 ]: S     </el-tooltip>
9 r4 [. ^% ?1 f$ b  </ElCol>

; M& U3 w: a! k1 j% e</el-row>

7 {( T; d" b8 k* u$ j<!-- Page split -->
" B6 H& N' H& x( v$ H& [<br>
9 B7 B; K+ l: e9 M2 @
6 x" K8 ]2 Z. B& J: |<el-pagination background
9 y; L6 Q- G; W8 a" y  :total="1000"
  layout="prev,pager,next">
/ u% a1 O3 A! v2 ?/ o3 }</el-pagination>


5 L+ s+ W1 K4 s' w0 r5 W
% M  x; b" {6 A$ J</div>
</template>

8 E% h0 A! w+ z! Q' m<script>
4 T4 e* e& m+ G' w; U. c8 ?
( v8 l! m0 Q! N1 f* Kexport default {
. U' V9 P6 U9 V  }) ^  name: 'app',
  data(){
    return {
( ?: t, K; _2 |' i; L      activeIndex: '2',
4 S: C: d4 ^; a- i( w3 N% d      url:"http://baidu.com",
0 f! Q* i; H2 y, w( A      tableData: [{
1 i: f+ n, J1 N: W* Z4 A6 [          date: '2016-05-02',
$ U2 F+ m( W7 r7 A          name: '王小虎',
4 F2 `/ n  i8 Q9 F6 l# `2 h          address: '上海市普陀区金沙江路 1518 弄'
1 h* j! c! J. N( R* n1 w5 u: I        }, {
          date: '2016-05-04',
! p) e  f8 u% J          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
5 t1 N* ]9 b/ c2 C9 R  E          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
2 [9 h5 ^( o- _3 P8 i4 G        }, {
          date: '2016-05-03',
( ~& W/ D6 `$ E' U          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
    }
  }
7 }0 V4 H( N4 Y, D: p0 c3 L}
</script>

' `0 P! c% w% ]<style>
9 f2 |5 v6 `1 s6 r  #app {
' Y2 e* k1 D, i" |9 |/ ^, R        font-family: Helvetica, sans-serif;
+ U3 @$ v. f- ], P# D7 q. l5 Z        text-align: center;
    }
</style>

8 s' h+ X: V8 p8 I0 {8 A4 |/ O3 D
% Z4 |$ X& c, y4 q7 q