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

admin

Vue element-UI开发学习---单一页面学习
- L1 Z1 I3 [( ]3 Y$ n0 B

# Q; P, e, D7 r( \9 o
; Y8 T: @/ _3 R/ `$ A<template>
  <div id="app">
+ d. D1 X) h, @% _5 n) J1 z <!-- nav -->
<el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
1 M  R1 y8 K) Z9 H# ^  _0 D  background-color="#545c64"
9 s! e2 a2 H+ i  text-color="#fff"
  active-text-color="#ffd04b"
# k, S" V+ L6 s8 B  menu-trigger="hover">
    <el-menu-item index="1">Data View</el-menu-item>
    <el-submenu index="2">
" S5 a) r' S9 D9 E  y      <template slot="title">Data XX</template>
9 a3 ^2 u$ e' G6 @. m3 L      <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
      <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
; u& k) ~$ c$ G5 C1 ]6 `; K/ d      <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
' O6 [. A0 z. v- U6 \+ u! Q* `      <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
    </el-submenu>
    <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
</el-menu>

% ~9 |. r. b: s. h5 }" x
<!-- search -->
5 }3 E2 g7 F3 k/ c, F0 o; a7 W# x/ I <br>
, m$ X9 v* L1 I: M0 F<el-row>
9 ?, a, V. H2 C4 y9 ]  <ElCol :span="6" class="grid">
3 E$ l! h2 S5 G! J) A    <el-input v-model="input" placeholder="please input the value" ></el-input>
# J  a; d2 T9 Y% \4 v  </ElCol>
; P7 l" t7 k& h+ u& Y4 I9 ]  <ElCol :span="2" class="grid">
    <el-button type="success" icon="el-icon-search" >Search</el-button>
  </ElCol>
</el-row>
<br>
" e$ h! R  E; ^: {4 v. Z2 A
<!-- table and operations -->
# O( I, y6 \. X8 x: o<el-table
:data="tableData"
0 e9 ~6 s. {/ u) J; @7 L7 Bstyle="width:100%"
' g5 [2 C3 V" X' b- ^( Vstripe
# o4 p2 T3 x9 i; g>
<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>
$ z) g! [, O/ Z* I) [) n<el-table-column align="right">
  x$ u5 w$ s$ v' Y<template slot="header">
<el-input v-model="search" placeholder="please input the keywords"></el-input>
</template>
</el-table-column>
  p% E* V: x: ?4 r8 _
( b- l% _+ A3 E% ~) s2 w. {1 A<el-table-column>
" R  R' o/ w; A! C" R5 b<template >
( M2 J' N, W$ f1 C' t/ y8 H9 s  <el-button  type="primary" icon="el-icon-edit">Edit</el-button>
" n: b! I; B+ h+ K! T2 F  <el-button  type="danger" icon="el-icon-delete">Delete</el-button>
' t  l& M. }9 r* P" k</template>
  {' T# M* Q* o/ w</el-table-column>
</el-table>
/ y' K0 g  q! g9 c5 t( C
* e1 }. S- O: C9 m/ ?7 O<br>
0 b7 b; C. O! `( G5 p: J( _; k<!-- Add new buttons  -->
<el-row>
& I* I; H: L; ^% ^4 a1 i4 T- J+ N  <ElCol :span="1" class="grid">
4 H2 e) O" I9 H9 d    <el-tooltip effect="dark" content="Add new information" placement="top-start">
    <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
! c* W1 _7 u( \6 s     </el-tooltip>
  </ElCol>
5 L7 w6 R8 ]! N5 V3 j' b
  <ElCol :span="1" :offset="1" class="grid">
     <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
      <el-button type="danger" icon="el-icon-delete">Delete All</el-button>
" d4 x9 ~5 x0 ]$ G% o6 c0 S" }) s     </el-tooltip>
  </ElCol>

</el-row>
) i2 ?1 J8 W# B; M
<!-- Page split -->
<br>

<el-pagination background
  :total="1000"
! c* C- ^( j6 N! a3 u  layout="prev,pager,next">
</el-pagination>



: U& \( {/ f/ H6 ^4 C6 g</div>
4 c& d0 l2 J/ N8 m</template>

0 Q: K; {8 N6 D! Z  q<script>
) Q, |6 w9 s+ D+ M( P* y6 F) e
4 G7 U: d+ j3 r  T: Z$ \export default {
  name: 'app',
; j$ g- n3 s2 ^+ ~2 d+ l2 q: V  data(){
) o& L1 }- i4 m" E% U5 X    return {
      activeIndex: '2',
      url:"http://baidu.com",
      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
$ R; G6 R4 O5 k; U' X; R          address: '上海市普陀区金沙江路 1518 弄'
. {3 M) [0 T3 s( a- c  n1 t: o        }, {
" a0 U/ w( X5 E; e1 W- d8 M- T          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
0 |. h0 f8 c" C: X1 r          date: '2016-05-01',
          name: '王小虎',
) v, [- x5 a, g3 G6 ]3 `          address: '上海市普陀区金沙江路 1519 弄'
        }, {
3 s; F# k7 t, j          date: '2016-05-03',
& u* d3 K( v+ Y1 H          name: '王小虎',
. m1 a4 q* X7 E( Q5 ?, H          address: '上海市普陀区金沙江路 1516 弄'
        }]
    }
  }
}
9 `3 y" U0 u+ w$ O</script>
7 M. F! r7 H+ _) {1 e% d* O1 y7 o% h6 ?
<style>
  #app {
        font-family: Helvetica, sans-serif;
        text-align: center;
    }
</style>
( f2 ^, E" v# R9 D/ z