<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<style>
.el-row {
margin-bottom: 5px;
&:last-child;{ margin-bottom: 0; }
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
.el-table .cell {
line-height: 12px;
}
[v-cloak]{
display: none
}
.el-table__empty-block{
height:20%;
}
.block {
margin-top: 8px;
margin-left: -5px;
}
</style>
<div id="app">
<el-row :gutter="5">
<el-col :span="3">
<el-select v-model="query.status" size="small" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="3">
<el-input v-model="query.no" size="small" type="text" placeholder="no" clearable></el-input>
</el-col>
<el-button size="small" icon="el-icon-search" style="margin-left:10px;" type="primary" round v-cloak v-on:click="add">Query</el-button>
<el-button size="small" icon="el-icon-news" v-cloak round v-on:click="add">Create</el-button>
<el-button size="small" icon="el-icon-edit" v-cloak round v-on:click="add">Revise</el-button>
<el-button size="small" icon="el-icon-delete" v-cloak round v-on:click="add">Delete</el-button>
</el-row>
<el-table :data="tableData" size="small" :stripe="true" v-on:current-change="CurrentChange"
:cell-style="{'font-size': '10px',}" highlight-current-row
border :row-class-name="tableRowClassName"
:header-cell-style="getRowClass">
<el-table-column type="index" width="50" label="#"> </el-table-column>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column property="closed" label="close">
<template slot-scope="scope">
<el-switch active-color="#13ce66" inactive-color="#ff4949" v-model="scope.row.closed" v-on:change=changestatush(scope.$index,scope.row)>
</el-switch>
</template>
</el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
<div class="block">
<el-pagination v-on:size-change="handleSizeChange"
v-on:current-change="handleCurrentChange"
:current-page="query.currentPage"
:page-sizes="[15,25, 50, 100]"
:page-size="query.page"
layout="total, sizes, prev, pager, next, jumper"
:total="query.total">
</el-pagination>
</div>
</div>
<script>
var dd = new Vue({
el: '#app',
created(){
this.options=[{ value: '选项1', label: '黄金糕'}, { value: '选项2', label: '双皮奶' }, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}];
this.tableData= [{
date: '2016-05-02',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
];
this.total=11;
},
data:{
currentRow: null,
options:[],
tableData:[],
query:{
total:16,
page:15,
currentPage:1,
tatus: '',
no:'',
}
},
methods: {
add(){
},
handleClick(command) {
console.log(command);
},
getRowClass({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return 'color: #333333;height:20px;font-size: 13px; background-color: #d9edf7;'
}
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex === 1) //=>这里可以改成 rowIndex%2=== 1，后面直接else即可达到隔行变色效果。
{
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
handleSizeChange(val){
console.log(val);//size 15 25 50
},
CurrentChange(val) { //SELECT
this.currentRow = val;
},
handleCurrentChange(val) { //page 1 2 3
console.log(val);
this.tableData= [{
date: '2016-05-02',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1518 弄',
}
]
},
}
});
</script>
</script>
</body>
</html>