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

admin

Vue element-UI开发学习---单一页面学习
- P$ T& ^# X6 X) [8 C
1 y! k$ Y7 W  [- R! |" K& B
8 I: v- u: O8 i( e
% u& a8 `1 j# C  O0 }3 S: [  |<template>
  <div id="app">
<!-- nav -->
9 I3 V- r  p' u& E% o/ |. ? <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
  background-color="#545c64"
1 ]; t$ C7 f7 V, ?# O: l  text-color="#fff"
* W8 ]1 U5 y# Q$ R8 y* q4 a' e, D  active-text-color="#ffd04b"
0 |' F4 X! W7 v1 q: x" O& T, G1 [  menu-trigger="hover">
    <el-menu-item index="1">Data View</el-menu-item>
    <el-submenu index="2">
      <template slot="title">Data XX</template>
& |% ]6 m; n! r$ Z( `      <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
      <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
      <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
& z" E$ R: `5 k& n8 t      <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>
- {0 S+ P5 `( r+ |7 m6 u, \! R </el-menu>


) E: }  {# O; Q1 I, Y- k; q <!-- search -->
<br>
<el-row>
% W, ~: \5 v, \# z2 H3 k/ r  <ElCol :span="6" class="grid">
) e9 ]2 [  j, d# ]    <el-input v-model="input" placeholder="please input the value" ></el-input>
% Z) ]! K4 t1 ]1 n9 g  </ElCol>
1 c  k0 E( `3 @0 R1 v  <ElCol :span="2" class="grid">
# m6 n, K, s4 g1 Q. ^; H    <el-button type="success" icon="el-icon-search" >Search</el-button>
  </ElCol>
</el-row>
<br>

<!-- table and operations -->
<el-table
' a! s6 a) X. O:data="tableData"
style="width:100%"
stripe
2 j4 W& p# e2 [( }, x>
. O' C/ p4 b  A5 c! S1 w<el-table-column fixed label="Date"  prop="date"></el-table-column>
$ Y# a& L7 `, d0 x<el-table-column label="Name" prop="name"></el-table-column>
' V1 s& W+ i0 ?/ i<el-table-column label="Address"  prop="address"></el-table-column>
1 R6 w% O) X* X, K<el-table-column align="right">
7 t3 }7 ?" n! r- G<template slot="header">
  I! a9 M) j. k8 e <el-input v-model="search" placeholder="please input the keywords"></el-input>
/ g2 K  J/ }) L$ q  l</template>
0 _- Q  Y) C! O7 i</el-table-column>

% J3 H0 E% F3 ^, c) ?& ?<el-table-column>
9 O& Q8 i+ T6 M1 T4 i' n<template >
  <el-button  type="primary" icon="el-icon-edit">Edit</el-button>
9 T# h/ K" b8 x$ ]7 F' U: _" t  <el-button  type="danger" icon="el-icon-delete">Delete</el-button>
</template>
, Z9 G4 A4 s- r1 a# \- n3 L4 _</el-table-column>
$ A5 c- z* w! s, R2 {</el-table>
- k( P  M9 t; N7 [) T. z7 ~
# F5 X* \: ^( g# P<br>
$ L2 a) H0 B3 Y/ ^# B9 y<!-- Add new buttons  -->
<el-row>
  <ElCol :span="1" class="grid">
! u, d# T* V; x3 ?% u    <el-tooltip effect="dark" content="Add new information" placement="top-start">
* {- {2 M4 M# @( L* {; M; h  V0 ~0 B    <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
     </el-tooltip>
  </ElCol>
' {( A( u1 Z$ }
# R9 u. h$ D7 x' i! Y% E  <ElCol :span="1" :offset="1" class="grid">
' o9 e6 g% X- h& H$ {     <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
/ j  i. X" P' G/ i      <el-button type="danger" icon="el-icon-delete">Delete All</el-button>
. o9 ?7 X) X4 f     </el-tooltip>
  </ElCol>

% y9 R4 K: ]. @% F, k</el-row>

<!-- Page split -->
<br>

! J4 S* O" p2 O: ]/ f& @<el-pagination background
5 c* D( n+ s: a- |8 J0 E2 V  :total="1000"
' l* H# E/ v. ?" A, l  a. w- l  layout="prev,pager,next">
$ \5 @" N# m+ _</el-pagination>
5 H6 J! x3 t7 h+ ]) U: C1 K
1 `4 Q2 I3 _, O' j3 V% X& [

% T  |2 }3 @2 T7 h8 t</div>
</template>

<script>

5 {+ K( `2 [9 C4 Z1 F) \+ w# u$ rexport default {
  name: 'app',
  data(){
) [# g9 A$ w' j/ M0 q    return {
      activeIndex: '2',
- |/ U' N4 ~0 {      url:"http://baidu.com",
      tableData: [{
& y& ^( c; f2 m& T/ x! w  Q          date: '2016-05-02',
9 R, A+ d; V% x1 E( F          name: '王小虎',
+ d$ f! F/ x4 G# n' Z3 Q: ~          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
7 l% T' V, E% \1 ~8 l          address: '上海市普陀区金沙江路 1517 弄'
4 X+ d1 H, q$ ^7 z3 `/ v        }, {
          date: '2016-05-01',
4 Z- k% g( R* h2 q, N% U          name: '王小虎',
* L  E4 _5 {: v+ L. Y          address: '上海市普陀区金沙江路 1519 弄'
  j3 s+ h) q9 \$ \) E& R        }, {
          date: '2016-05-03',
& U/ f6 t) S6 L$ l% A/ A          name: '王小虎',
* J8 G  _0 x6 N' r* ?6 r; D          address: '上海市普陀区金沙江路 1516 弄'
        }]
    }
: Q& b. F/ K4 K- c, m. x/ P9 \+ g1 z  }
}
</script>

* ]- K6 B. |/ p1 \. i7 A* q& o<style>
. s3 W* V  F, f3 }! u! }1 x  #app {
( C1 y0 Z  A! |7 g& \        font-family: Helvetica, sans-serif;
        text-align: center;
    }
</style>