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

admin

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

$ _: O# d. n, m* A; ?6 M

! `- B: Q) H2 I/ Q7 M<template>
9 O) e+ ^* J' p8 _# _6 n  <div id="app">
<!-- nav -->
<el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
  background-color="#545c64"
4 I) N$ E2 @% Z/ Y# m+ M1 q  text-color="#fff"
  active-text-color="#ffd04b"
  menu-trigger="hover">
0 \9 |9 p3 M' K- g    <el-menu-item index="1">Data View</el-menu-item>
8 b9 v( P, @$ N    <el-submenu index="2">
      <template slot="title">Data XX</template>
1 v, _8 o, o- i' r7 q      <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
      <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
      <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
      <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
! h, v2 n) q, A  D- L) ]8 m9 {0 R  ]    </el-submenu>
( k+ P- @& v' n( n- L2 G8 r& L    <el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
</el-menu>
( Z) f' Q. p4 ^3 `  @" F: n
' n3 }9 |  r( w7 h
<!-- search -->
! n4 Q' e% \/ @1 R; t  c8 m' @ <br>
<el-row>
  <ElCol :span="6" class="grid">
$ x( h4 c4 g4 v    <el-input v-model="input" placeholder="please input the value" ></el-input>
  </ElCol>
& F9 y5 U0 v, j3 h$ Q  <ElCol :span="2" class="grid">
6 l3 M# N; V% |3 X6 s* J3 o    <el-button type="success" icon="el-icon-search" >Search</el-button>
6 v0 h. a8 _9 j$ u* h) W  z; d9 G  Q  </ElCol>
% ~0 k( {& ?: X1 [- ]' F( k</el-row>
<br>

: f5 [, j+ X4 K/ w<!-- table and operations -->
<el-table
% ?# o8 [  E* V0 @, |:data="tableData"
style="width:100%"
stripe
8 X8 I! n- _  h* o>
5 p6 X  U/ @. l3 d<el-table-column fixed label="Date"  prop="date"></el-table-column>
+ k  h: {: M' o# P8 D5 K! @8 s<el-table-column label="Name" prop="name"></el-table-column>
<el-table-column label="Address"  prop="address"></el-table-column>
<el-table-column align="right">
# U9 E1 T+ x" u  K<template slot="header">
<el-input v-model="search" placeholder="please input the keywords"></el-input>
% V$ U" r! J/ g' r' M3 Y- C</template>
# e. q7 F) m. }" W5 F1 l+ ?</el-table-column>
3 w$ y9 [% l  i* l6 c3 S
<el-table-column>
* q; w5 Y8 q  }5 @<template >
7 p4 s" d) n8 F3 W0 ?* Y! {* ]& t  <el-button  type="primary" icon="el-icon-edit">Edit</el-button>
$ ]" z5 ^( z* G+ b4 j  <el-button  type="danger" icon="el-icon-delete">Delete</el-button>
) {9 S; T# [. C) b8 Z, E" m</template>
</el-table-column>
- ]# u( h5 }/ [, S- S  w, q" O</el-table>

<br>
, b3 v, H, y: J<!-- Add new buttons  -->
<el-row>
  <ElCol :span="1" class="grid">
) s  X4 \3 y" Q0 d6 K$ W    <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>

  <ElCol :span="1" :offset="1" class="grid">
& G% b0 g0 L0 g, u3 D     <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
/ M- k; _% Y3 p6 H      <el-button type="danger" icon="el-icon-delete">Delete All</el-button>
     </el-tooltip>
  </ElCol>

</el-row>
7 X$ v9 a% V. M) E8 V; }
8 Q5 Q* ?/ V  T6 B& V5 G9 a<!-- Page split -->
<br>
' {* {2 i$ f4 D( g' G& E* N* K
<el-pagination background
' f) ]3 B. f% k- T2 m2 F5 d  :total="1000"
0 a9 k! a% [3 J9 q/ R9 Q# E/ g  layout="prev,pager,next">
</el-pagination>

5 s. p, a  z5 Y, |: o& \- _& E

. x5 I" U4 y% l$ R! c</div>
# a- s! ~- |% Q7 [</template>
5 G; ~8 P! n! e# h* C
4 ]3 o- a8 I/ t+ v+ K3 @, P" K<script>
1 B& R  j: {& b& A; L" v& d4 Y+ g
export default {
( f$ w4 o/ H- M+ h* E/ I9 A  name: 'app',
  g, v% l+ v1 b& r' K. R  data(){
    return {
. B( H1 m7 s- s1 p+ B1 ]+ Y      activeIndex: '2',
      url:"http://baidu.com",
      tableData: [{
' W0 H' p- h0 W          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
0 s5 s4 M8 A+ o6 r  F6 ?3 o5 B          date: '2016-05-04',
  z, V- E% P; P& q6 f          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
3 V4 y# `% s  i5 _  C          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
, D  M$ _4 h+ ~/ i' Q1 |/ M        }, {
! ~0 d9 Q% ^/ k          date: '2016-05-03',
- V% |+ W, U; X( i          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
    }
  }
}
. G% n5 ^7 _; G</script>

<style>
  #app {
# u! ?1 ]4 M0 ^" q7 _        font-family: Helvetica, sans-serif;
        text-align: center;
# B9 k) R5 T5 G1 u" d9 S$ L$ F    }
</style>