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

admin

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



<template>
  <div id="app">
<!-- nav -->
<el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b"
. g7 G6 T+ \" H# V" A8 J- T  menu-trigger="hover">
. G9 A. G/ V/ Q& p+ h    <el-menu-item index="1">Data View</el-menu-item>
' n! A; f5 o+ j" c0 z( V4 i    <el-submenu index="2">
      <template slot="title">Data XX</template>
      <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
      <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
      <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
. X! a/ X+ @0 Q      <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
    </el-submenu>
, p0 p4 A, n' O" o/ H' F+ m# U# X! q    <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
/ b% c6 _% [' O# k& \ </el-menu>
+ o( O! j8 {; t
5 O. B5 i+ T; U* v# O
+ S% _0 |5 X" @$ A1 g/ ` <!-- search -->
<br>
  Y. u5 p4 y/ o3 }+ [<el-row>
2 r; Z" {3 N- L' l* w" L  <ElCol :span="6" class="grid">
    <el-input v-model="input" placeholder="please input the value" ></el-input>
5 r8 Y- d; D& D( U  </ElCol>
  <ElCol :span="2" class="grid">
    <el-button type="success" icon="el-icon-search" >Search</el-button>
  </ElCol>
</el-row>
<br>

, x+ o) f+ [1 \% P* F# K<!-- table and operations -->
4 d3 }# r' x* L1 y9 y$ A( ]/ z<el-table
8 C% f) j9 \' O; T6 R:data="tableData"
style="width:100%"
stripe
0 G# q, L3 X* x; T# W. ]>
8 _, V6 |2 c6 g( p4 g/ m! `<el-table-column fixed label="Date"  prop="date"></el-table-column>
<el-table-column label="Name" prop="name"></el-table-column>
1 M! Q. }  G$ ~3 U<el-table-column label="Address"  prop="address"></el-table-column>
( k1 T8 _$ m' q<el-table-column align="right">
+ T- N* [, W) a0 j! r( [<template slot="header">
<el-input v-model="search" placeholder="please input the keywords"></el-input>
</template>
</el-table-column>

, }  t4 M( o% Q1 M) [2 r/ t/ y9 j<el-table-column>
<template >
# {: @+ N2 h5 I$ e5 H  <el-button  type="primary" icon="el-icon-edit">Edit</el-button>
  <el-button  type="danger" icon="el-icon-delete">Delete</el-button>
</template>
</el-table-column>
</el-table>

<br>
- U! |+ s, d. Y<!-- 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>
% b/ `( Q4 f& ~2 f! Q) U     </el-tooltip>
  </ElCol>

  <ElCol :span="1" :offset="1" class="grid">
: D$ z, L( t+ M     <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
: Y% [3 j9 g; A$ Q      <el-button type="danger" icon="el-icon-delete">Delete All</el-button>
     </el-tooltip>
4 r, I( D- f; x* A  </ElCol>

</el-row>
  A* o. L1 C8 U* G2 H
, ?9 X# c& y3 z- J$ q! f8 A2 ?4 i% ?<!-- Page split -->
# m$ P  j( G. B( j<br>

<el-pagination background
  :total="1000"
  layout="prev,pager,next">
( j$ B3 E) w+ v/ j6 ?* i* R0 E0 z</el-pagination>

7 R/ |# y( J5 X/ d! E" e, U, c& V" C

: I+ \0 X4 }! F</div>
</template>

<script>
: \. m5 g* j) R, b( D* U, n1 _; m
export default {
$ V+ U$ N0 }  a3 W) ~# }  name: 'app',
" G% @" Z+ v' w$ `  data(){
    return {
      activeIndex: '2',
& e2 C2 e9 Q: H; t; V: k3 ?      url:"http://baidu.com",
      tableData: [{
          date: '2016-05-02',
. Y. ^3 Z& L6 q& \/ |! o          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
7 q2 B7 E$ I. \          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
# N) G; l& o6 ]* [/ J% _& e/ G; D          date: '2016-05-01',
          name: '王小虎',
5 s0 }! s1 A9 i- e  m' |          address: '上海市普陀区金沙江路 1519 弄'
        }, {
5 W( f* S1 T0 J% ?$ D2 K+ M9 O          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
- c" H4 q- V& S6 t" Z    }
: I9 \& \) [  I- F- X8 }  }
$ Q+ O5 j& q( \2 l9 h}
</script>
/ d% p6 T9 O- ^( h
<style>
  #app {
6 q/ j, r, }: D& C/ }. s: S8 g        font-family: Helvetica, sans-serif;
        text-align: center;
    }
</style>
9 K  w! A& r+ ?. l3 V2 ]8 e