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

admin

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

& K0 s0 n3 e1 K( U3 u2 p4 C  A

<template>
: b- i4 h6 `1 P: ?: g: \  <div id="app">
$ |2 \6 z/ u# M' r' h <!-- nav -->
$ y# [5 Q& C8 r <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
7 }8 @) y4 P7 w5 Q& T. c  background-color="#545c64"
  text-color="#fff"
8 j& I; K5 Z3 }# U$ r9 [  active-text-color="#ffd04b"
5 j' W# P- A6 |  menu-trigger="hover">
7 G2 X  G" i, M- j    <el-menu-item index="1">Data View</el-menu-item>
& S: `  r4 O' ~' {1 k: A    <el-submenu index="2">
      <template slot="title">Data XX</template>
8 y# e( M# a/ h: l# c) z2 c1 n. E      <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
8 {4 d7 m, f5 @# w2 E. D      <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
      <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
  ]; ~$ `  r4 _      <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
6 L1 F, i8 e6 ]6 t' X7 h3 X    </el-submenu>
    <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
</el-menu>


<!-- search -->
  b4 U9 b) ?# Y! A, d <br>
<el-row>
  <ElCol :span="6" class="grid">
    <el-input v-model="input" placeholder="please input the value" ></el-input>
  </ElCol>
% B- K% S3 E% \) p9 O8 A- M; Q6 s& i5 p1 A- Y  <ElCol :span="2" class="grid">
    <el-button type="success" icon="el-icon-search" >Search</el-button>
  </ElCol>
</el-row>
; ]- H1 E  @5 a1 e7 [ <br>

<!-- table and operations -->
$ h5 g& d4 }! w3 g<el-table
:data="tableData"
4 R& K* v+ g3 b/ O$ J9 \style="width:100%"
& J4 I) W) b' v+ ^$ Ostripe
>
, q! T7 l: L7 }; }7 i1 T/ i<el-table-column fixed label="Date"  prop="date"></el-table-column>
( L5 m) E* X6 [8 Y<el-table-column label="Name" prop="name"></el-table-column>
<el-table-column label="Address"  prop="address"></el-table-column>
# y7 c! N) s( D) y8 P; U; C<el-table-column align="right">
: L$ j9 I5 h) ~<template slot="header">
; l: q& @1 e; P! ]' ` <el-input v-model="search" placeholder="please input the keywords"></el-input>
/ T) g. ~4 i7 A3 N1 ], y7 N) F/ K</template>
</el-table-column>
8 O& E1 t# d" |. R
, ^3 B* G) V: c% s<el-table-column>
5 R& J* Q  ^1 b<template >
% N3 i) z: G0 E) ]# `. R( U  <el-button  type="primary" icon="el-icon-edit">Edit</el-button>
  <el-button  type="danger" icon="el-icon-delete">Delete</el-button>
</template>
$ O3 `0 N3 H, v</el-table-column>
2 ]- s, S2 y. Q</el-table>
  i1 h7 E- t# @9 b6 r0 f5 u+ H- s: ]
/ s" x$ V2 K% l8 P/ K<br>
3 k* j& W. ^! N& F8 W" P( C+ G2 a# x<!-- Add new buttons  -->
<el-row>
% U! o$ j# v. e  <ElCol :span="1" class="grid">
7 L1 [/ r+ }# M/ C8 j6 y    <el-tooltip effect="dark" content="Add new information" placement="top-start">
    <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
     </el-tooltip>
  </ElCol>

  <ElCol :span="1" :offset="1" class="grid">
     <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
" I+ G8 G- m7 e- N      <el-button type="danger" icon="el-icon-delete">Delete All</el-button>
* C4 G1 y4 l2 C9 j; a2 n6 w1 ^     </el-tooltip>
  </ElCol>

. ]! X2 B% |3 J9 \: l! H7 w9 c</el-row>
  b* z' g. I* G8 q% @$ n
" X' K% G2 ^' ]5 R9 N8 m# p; g<!-- Page split -->
  B2 _- e( i1 t3 w* q<br>
, e' m: h  c; w, j, q
<el-pagination background
" O% m2 K0 ^9 e& I) t* ^+ `  :total="1000"
  layout="prev,pager,next">
</el-pagination>
$ t  y) k! [3 _0 q" ~% k


</div>
: t9 t- M8 X0 K</template>

<script>
) O2 X4 }4 i0 \: }) x* `, X
export default {
+ d2 t) [; ~0 U7 F* o9 z  name: 'app',
  data(){
    return {
9 _: D0 f; q- I      activeIndex: '2',
" ?( i( p. S# ?% Q  d7 \2 a, }      url:"http://baidu.com",
. [, P$ R! {  V# N      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
1 ]9 Y+ q( B8 W! a( Q* E        }, {
          date: '2016-05-01',
          name: '王小虎',
4 U; d, S. i' j) l1 ]          address: '上海市普陀区金沙江路 1519 弄'
        }, {
8 ^( n3 A' N1 b9 X( g, k3 \          date: '2016-05-03',
6 A( h& L# k; q& C" y4 }' u          name: '王小虎',
$ t) V% Y" |3 N( }          address: '上海市普陀区金沙江路 1516 弄'
" f4 L% r6 c  X- w+ p        }]
& X* o% v; a, w& G    }
  }
; y5 ^  K6 L8 p: _+ e: R0 ]}
. \; ~+ W) a5 p</script>
/ `2 h8 W. E2 V9 A* f% @, I
* c2 y. D; p' {<style>
, S. Z5 F* N1 |- q/ m( T  #app {
        font-family: Helvetica, sans-serif;
        text-align: center;
    }
</style>

- c& @4 {# x% {. ^9 W1 y. e1 J1 N
* f) F  C3 z8 w) B7 c( n