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

admin

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

: i6 F, v8 W8 z4 Q

6 Q  y$ L. v+ ?& C; h; \<template>
  <div id="app">
1 A2 `9 R8 U2 W  h1 `1 \ <!-- nav -->
<el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
  background-color="#545c64"
  text-color="#fff"
/ v' o4 h; q7 ]7 z0 p  active-text-color="#ffd04b"
  menu-trigger="hover">
    <el-menu-item index="1">Data View</el-menu-item>
% I; @, [. S6 |' o: [8 o    <el-submenu index="2">
$ y8 A2 l4 m6 @      <template slot="title">Data XX</template>
      <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
0 J0 P: u! U9 u9 w; y/ [, b, ^      <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
9 ], F2 V/ t4 H4 K8 [      <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
      <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>
' b4 v7 R' S/ ]* P$ `

<!-- search -->
% _# M/ _8 [% \- E- E7 I/ z0 X4 A <br>
! E1 y3 h% F) \. w+ R9 l<el-row>
+ C4 V) |  {" l& r& x: E  Y" c* x! m  <ElCol :span="6" class="grid">
    <el-input v-model="input" placeholder="please input the value" ></el-input>
0 _% O. \3 _8 K- \  </ElCol>
$ u, p1 h  K, f  <ElCol :span="2" class="grid">
0 W4 V* G$ Y$ t4 f( C! i+ T    <el-button type="success" icon="el-icon-search" >Search</el-button>
  </ElCol>
</el-row>
<br>
: `# B% m" w( B% H
<!-- table and operations -->
. W# ?! i4 [/ n* \5 A<el-table
:data="tableData"
# o/ R, h4 x" q3 s3 l5 ?2 f8 gstyle="width:100%"
stripe
$ w- \  J8 V7 m( u: x>
<el-table-column fixed label="Date"  prop="date"></el-table-column>
. ~, W6 h! |2 g; P<el-table-column label="Name" prop="name"></el-table-column>
- H. b2 C/ E4 `( W# v- n<el-table-column label="Address"  prop="address"></el-table-column>
; X: R5 G& v. ^<el-table-column align="right">
- i) K4 T9 B& L1 l/ }; D<template slot="header">
<el-input v-model="search" placeholder="please input the keywords"></el-input>
! i& k* O( u( c, f</template>
$ p" t2 i, a1 d* P7 E( M) e9 @</el-table-column>
* Q& z# e0 i5 s
" A. Z- \' S3 X  {$ G<el-table-column>
<template >
: [7 l5 [; K( h+ @' i& f2 a+ D  <el-button  type="primary" icon="el-icon-edit">Edit</el-button>
  <el-button  type="danger" icon="el-icon-delete">Delete</el-button>
) x/ S4 J$ t2 i* W2 k1 Y% j; l</template>
</el-table-column>
  e$ v# {7 N3 {" V- P. g4 Q3 [</el-table>

<br>
" h- |/ W9 @! u<!-- Add new buttons  -->
" c5 k. e; l- |% Y2 ]* W, Y<el-row>
  <ElCol :span="1" class="grid">
    <el-tooltip effect="dark" content="Add new information" placement="top-start">
6 o% s1 C* c" Y+ u3 R8 I  v    <el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
     </el-tooltip>
6 _/ J1 w5 \; n& A! d, e  </ElCol>
: t% i+ A' I! P
  <ElCol :span="1" :offset="1" class="grid">
% a0 q1 I' n: `* f3 N  Q5 ]     <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
' `8 \1 a! O3 w; S. n      <el-button type="danger" icon="el-icon-delete">Delete All</el-button>
! L' H) W3 C5 G8 \5 E  @     </el-tooltip>
0 S4 u. V9 Q1 X4 h  </ElCol>
) u" p* Z/ ^: z* x5 }# y7 r
</el-row>

<!-- Page split -->
: A! x) U6 H# T<br>
0 S: W- T4 m' B( C
2 B* X: |3 s' ^3 D- v" W<el-pagination background
9 v) L! _% r7 V  w$ c  :total="1000"
  layout="prev,pager,next">
5 h0 ^% O* g% u</el-pagination>



. K0 ?" q: a/ D  L& _4 H</div>
</template>
2 s7 X. C9 g# j- u* V6 a
<script>

; e& M7 |! Z" F, B% A1 U" t) Hexport default {
4 O/ {4 T2 \$ r* z& g7 e( {  name: 'app',
  data(){
% B5 w0 J6 u  W* r$ P    return {
, r$ r3 w# _6 F) h' G" m% a0 u' {      activeIndex: '2',
      url:"http://baidu.com",
      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
1 A/ C; I1 a# a7 ?; ~" z        }, {
          date: '2016-05-04',
          name: '王小虎',
  L* @" ^% d! N  O, y# ^6 s% `! z          address: '上海市普陀区金沙江路 1517 弄'
! ^/ z% r) L% [3 F( s        }, {
          date: '2016-05-01',
) i, j: ]) Z7 N  Q1 H' F1 X- n          name: '王小虎',
8 q3 ]- S% D6 @2 j7 f          address: '上海市普陀区金沙江路 1519 弄'
$ M# Q- y$ d3 Q  F" i        }, {
2 K: c. v* T, Y; j9 Z- i9 B5 n          date: '2016-05-03',
* \3 l$ O5 A3 x1 e4 v) C          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
    }
( _( {" [8 k+ d# u! r  }
* o9 U( }0 d. J/ m9 e. f( D) x}
</script>

<style>
5 }, Q% a) V# H  A! l& u1 f6 l  #app {
        font-family: Helvetica, sans-serif;
        text-align: center;
    }
</style>

6 t3 u8 \2 M% [3 A
! q* V- q: M8 [