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

admin

Vue element-UI开发学习---单一页面学习
$ t, H  G) L( x  d" h" R% o1 C
: r0 u! V/ |5 `4 E  y
* h3 `/ x7 [3 a" b+ H. R# _2 S
. K0 X$ T. B' j3 Z; F<template>
  <div id="app">
: U6 V% y* i0 \3 ]7 {! z0 p <!-- nav -->
* v" X# Y8 o7 s2 n! r <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b"
  menu-trigger="hover">
& T' ^+ \8 s3 }1 }    <el-menu-item index="1">Data View</el-menu-item>
    <el-submenu index="2">
      <template slot="title">Data XX</template>
& J' `# t* f/ L5 ]$ P      <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
      <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
7 g) t6 K8 a+ r' V& g  b9 }      <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
      <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
    </el-submenu>
. W. Y8 I4 e- h3 i8 H% M    <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
; k' A. ~1 h( R$ b2 F7 G4 T </el-menu>
# V7 @9 y4 P( a' W2 |3 V! b
/ H1 Y7 Q9 n! m/ t* z) q
<!-- search -->
<br>
3 f. j: F0 E5 H& L( k! ?<el-row>
  <ElCol :span="6" class="grid">
    <el-input v-model="input" placeholder="please input the value" ></el-input>
0 S: F7 h  {2 Z3 k5 E  i  [  </ElCol>
6 w) Q9 X% ~# B3 E& W0 W  <ElCol :span="2" class="grid">
2 @9 O: ]2 G, u0 u; F    <el-button type="success" icon="el-icon-search" >Search</el-button>
8 W: Q$ o# ^8 O1 q. T2 r  </ElCol>
</el-row>
' z7 F: r% Y4 U& ~' o. A <br>

<!-- table and operations -->
<el-table
- x7 v1 |0 J, f7 A4 u* ~& }:data="tableData"
4 N/ |5 ~$ S: H  Bstyle="width:100%"
2 G& ?, h* ~  i+ cstripe
8 M' K. S, B0 \>
<el-table-column fixed label="Date"  prop="date"></el-table-column>
<el-table-column label="Name" prop="name"></el-table-column>
<el-table-column label="Address"  prop="address"></el-table-column>
" d2 G; c3 b/ I<el-table-column align="right">
/ r, @- Z6 W# A' b' E2 Y<template slot="header">
) B9 @) m% f$ X. @- E7 b# O6 M <el-input v-model="search" placeholder="please input the keywords"></el-input>
, }5 l" _6 K6 Q) T# V7 x3 y</template>
</el-table-column>

<el-table-column>
  a$ D" o; u6 e- ?<template >
  <el-button  type="primary" icon="el-icon-edit">Edit</el-button>
  ]9 F7 Y' B( m* a, O  C  <el-button  type="danger" icon="el-icon-delete">Delete</el-button>
; T& W  G5 a  j, G5 @$ s</template>
</el-table-column>
</el-table>

5 P7 o9 B9 W5 ?# G<br>
' K  {3 D8 N$ y* L<!-- Add new buttons  -->
<el-row>
2 [+ ^5 z  [' K+ l  `6 m2 s/ h  <ElCol :span="1" class="grid">
    <el-tooltip effect="dark" content="Add new information" placement="top-start">
" I7 X& p0 j  V5 n$ d# t    <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
9 @3 X; f( E! B$ E     </el-tooltip>
+ s/ Q, p! r2 O  </ElCol>
! u/ v, E! `+ K. h7 Q
  <ElCol :span="1" :offset="1" class="grid">
     <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
; o. k( c4 O6 D2 _      <el-button type="danger" icon="el-icon-delete">Delete All</el-button>
2 }* T0 x- p0 Q     </el-tooltip>
  </ElCol>

3 W: t  s$ J  F' L</el-row>

& Q; F$ r' S3 S6 P& W7 e% d" f, ~<!-- Page split -->
<br>
8 G3 n" d6 ]4 ?
5 r% _0 [- H2 l2 K9 A# Z. M+ d% J- C: J<el-pagination background
% S2 A8 G6 z, f1 }# l  :total="1000"
  layout="prev,pager,next">
3 n6 N  E- C" v9 Q5 F- K# ~</el-pagination>
5 B. C6 a% r+ L0 E
8 R1 m) s3 k; c
: B  ], v; g8 W; q- y
& G& R6 Q7 P1 r</div>
</template>

<script>

  }+ L! D$ J1 `, Z- Eexport default {
  name: 'app',
  data(){
! P2 ^5 v* [& X& F, }7 U    return {
      activeIndex: '2',
3 {4 b. j8 ^4 \' B+ G: \4 K; u      url:"http://baidu.com",
. J6 q. m( Q* r4 X! M      tableData: [{
0 K* R+ ?% A+ Z' I. z          date: '2016-05-02',
+ t9 S' x& l( m3 j4 p          name: '王小虎',
8 r$ s4 U5 Z  c* }; t          address: '上海市普陀区金沙江路 1518 弄'
0 s) }1 k) M/ U( z% }% p, i        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
& ]: [7 @& H/ d$ V) Y5 M        }, {
8 G4 h* q: w. N) U+ ^          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
. c, Y+ V6 q" h+ V) k# ]          date: '2016-05-03',
4 o% ]! q0 }, x( a' f3 d          name: '王小虎',
6 m. W$ x- Z0 D. V2 w2 l0 I: |          address: '上海市普陀区金沙江路 1516 弄'
        }]
& ]4 ~! ?6 ?# w6 n/ x    }
  }
6 k% ^' J* L* S' f}
' ?' J5 ^- n0 y) ], X( n+ `</script>
  |+ _/ n& m4 n6 u, H* ~
9 ^. |$ B% Q+ n& ~: _# ^% ^) X3 U% [<style>
. a5 l% l4 a; |  #app {
* K; G2 P* W- Q        font-family: Helvetica, sans-serif;
        text-align: center;
    }
</style>

) `5 Z+ m+ S. l4 n# A! J