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

admin

Vue element-UI开发学习---单一页面学习
0 _5 N2 C/ J5 ?" A

4 q: O( e! ~2 b5 j+ ]8 o
<template>
  <div id="app">
<!-- nav -->
) G: Y$ D, D3 d: Z4 t7 b! N <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
  background-color="#545c64"
9 X" n/ {. J/ s0 o9 ?6 [- u  text-color="#fff"
  active-text-color="#ffd04b"
$ J6 x" C" {# A) J  menu-trigger="hover">
    <el-menu-item index="1">Data View</el-menu-item>
2 y- y/ C# S# E# D6 s- Y    <el-submenu index="2">
      <template slot="title">Data XX</template>
5 M- W0 Z6 b( I1 t$ N: E: F      <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
      <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
      <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
7 J6 U4 ~$ G5 j4 G      <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
    </el-submenu>
0 y- {. p+ ], j    <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
</el-menu>
- B) r. u* j: ^- |5 }
( ^/ F7 _: I7 [
<!-- search -->
<br>
7 X+ N3 I3 s1 x3 b5 m$ V<el-row>
' D$ ?. a# D. J( y  <ElCol :span="6" class="grid">
    <el-input v-model="input" placeholder="please input the value" ></el-input>
& _! A; G* y# t4 T/ x  </ElCol>
  <ElCol :span="2" class="grid">
: g; u: G; y3 L& A6 l+ w    <el-button type="success" icon="el-icon-search" >Search</el-button>
  </ElCol>
</el-row>
<br>

7 V( b# ^$ ^* x<!-- table and operations -->
<el-table
:data="tableData"
# ~  N( P0 w8 c0 dstyle="width:100%"
stripe
6 B4 R3 L$ O. J6 J>
<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>
& u8 X2 E0 W+ a7 g& u% x) Q<el-table-column align="right">
<template slot="header">
- H: n5 i4 @6 Z, g2 b. S1 ] <el-input v-model="search" placeholder="please input the keywords"></el-input>
# t' c4 ^8 A4 x7 M) p* A</template>
# X4 I, ?, w1 Q4 S! E</el-table-column>
- Y' ~2 M) c$ a
<el-table-column>
<template >
  <el-button  type="primary" icon="el-icon-edit">Edit</el-button>
  u5 @8 j" W* t. p7 A  <el-button  type="danger" icon="el-icon-delete">Delete</el-button>
8 d; k! d  s- Z( r</template>
</el-table-column>
</el-table>
, i  ], t; [6 S9 m, w, _& y
1 T: |% q3 M3 D0 j<br>
<!-- Add new buttons  -->
<el-row>
  <ElCol :span="1" class="grid">
6 U7 n/ d, {, W6 Z/ `. {, i    <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>
% E+ e6 \& B' Q* J1 r, z* a0 C! U
  <ElCol :span="1" :offset="1" class="grid">
3 r0 J* {0 a# H     <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
$ z! g3 M; o/ C      <el-button type="danger" icon="el-icon-delete">Delete All</el-button>
. }# R7 V+ S+ e7 a. g# n     </el-tooltip>
' |9 G5 o2 O0 |) h4 X  </ElCol>

</el-row>

+ @; Y$ z* {9 y<!-- Page split -->
<br>
/ U" \2 h. O/ n( \& a6 ]
<el-pagination background
  :total="1000"
1 j0 N4 n, ~' ^6 K7 ?, x/ W( p4 ?  layout="prev,pager,next">
) S' W  m; {! \# H( Q5 [3 K</el-pagination>
2 P2 V8 ]% V! _0 U* m

# e1 C8 \$ L; |- F; y
% g4 A, p, Y# `# l* V9 B</div>
3 }, t" _, H+ I/ o$ F</template>

! ]0 y" p5 z0 D3 _. d<script>

4 L% Z9 O2 S8 k' J1 ~; i8 N3 ~/ \1 `export default {
4 R0 j: u4 u/ _0 A+ B9 F1 b  name: 'app',
2 Z* U, \) K- F& C' D* g  data(){
! f$ j; D+ o5 g2 h" K4 [    return {
+ O# n8 C5 w( Q1 o      activeIndex: '2',
      url:"http://baidu.com",
& O  j0 {- t: R9 |1 x5 O! p1 x      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
, i- O" d6 M4 |1 j* p  k          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
" s, D# p7 L" C( y4 ]3 ]# _& ?          address: '上海市普陀区金沙江路 1516 弄'
9 Y7 X/ \. T( x/ E& K' O        }]
    }
* G3 n2 E# B: W* E' @  }
}
: c1 U2 n0 `# T0 q) T+ S- l</script>

3 J* z( Q3 c4 M! A<style>
8 E* U1 N8 m5 z# Y. X6 m. Z  #app {
        font-family: Helvetica, sans-serif;
        text-align: center;
    }
. c6 @9 `! @( @% ^' S. m</style>
; M7 U. r" G6 Z. _$ a9 T8 U: a  p- Z

: D* c, ~1 O  [, y  {, N3 C