<!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@2.10.0/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@2.10.0/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%; } </style> <div id="app"> <el-row :gutter="5"> <el-col :span="3"> <el-select v-model="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="no" size="small" type="text" placeholder="no" clearable></el-input> </el-col> <el-col :span="6"> <el-date-picker v-model="timed" v-on:change="change1" type="daterange" value-format="yyyy-MM-dd" size="small" range-separator="-" start-placeholder="Begin" end-placeholder="End"> </el-date-picker> </el-col> </el-row> <el-row> <el-button size="small" icon="el-icon-search" v-cloak v-on:click="add">Query</el-button> <el-button size="small" icon="el-icon-news" v-cloak v-on:click="add">Create</el-button> <el-button size="small" icon="el-icon-edit" v-cloak v-on:click="add">Revise</el-button> <el-button size="small" icon="el-icon-delete" v-cloak v-on:click="add">Delete</el-button> <el-dropdown size="small" split-button type="primary" v-cloak v-on:command="handleClick"> Approval Process <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="0" >Submit</el-dropdown-item> <el-dropdown-item command="1">Reviewed</el-dropdown-item> <el-dropdown-item command="2">Confirm</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <el-button size="small" icon="el-icon-refresh-left" v-cloak v-on:click="add">Reject</el-button> <el-button size="small" icon="el-icon-upload2" v-cloak v-on:click="add">Import</el-button> <el-button size="small" icon="el-icon-download" v-cloak v-on:click="add">Export</el-button> </el-row> <el-table :data="tableData" size="small" :cell-style="{'font-size': '10px',}" v-on:selection-change="handleSelectionChange" border :header-cell-style="getRowClass"> <el-table-column type="selection" width="37"></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 background v-on:current-change="handleCurrentChange" current-page.sync="currentPage" :page-size="10" layout="prev, pager, next " :total="total"> </el-pagination> </div> <div v-if="isLoaded" class="el-loading-mask"> <div class="el-loading-spinner"> <svg viewBox="25 25 50 50" class="circular"> <circle cx="50" cy="50" r="20" fill="none" class="path"></circle> </svg> <div class="el-loading-text"> Loading... </div> </div> </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; this.isLoaded=false; }, data:{ options:[], isLoaded :true, status: '', no:'', timed:'', begin:'', end:'', tableData:[], total:1, multipleSelection:[], }, methods: { change1(val) { console.log(val); if(val.length==2){ this.begin=val[0]; this.end=val[1]; } }, 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;' } }, handleSelectionChange(val) { this.multipleSelection = val; console.log(val); }, changestatush(val,index){ console.log(val,index); }, handleCurrentChange(val) { console.log(val); this.tableData= [{ date: '2016-05-02', name: '王小虎', closed:true, address: '上海市普陀区金沙江路 1518 弄', } ] }, } }); </script> </script> </body> </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@2.10.0/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@2.10.0/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%;
}
</style>
<div id="app">
<el-row :gutter="5">
<el-col :span="3">
<el-select v-model="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="no" size="small" type="text" placeholder="no" clearable></el-input>
</el-col>
<el-col :span="6">
<el-date-picker v-model="timed" v-on:change="change1"
type="daterange"
value-format="yyyy-MM-dd"
size="small"
range-separator="-"
start-placeholder="Begin"
end-placeholder="End">
</el-date-picker>
</el-col>
</el-row>
<el-row>
<el-button size="small" icon="el-icon-search" v-cloak v-on:click="add">Query</el-button>
<el-button size="small" icon="el-icon-news" v-cloak v-on:click="add">Create</el-button>
<el-button size="small" icon="el-icon-edit" v-cloak v-on:click="add">Revise</el-button>
<el-button size="small" icon="el-icon-delete" v-cloak v-on:click="add">Delete</el-button>
<el-dropdown size="small" split-button type="primary" v-cloak v-on:command="handleClick">
Approval Process
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="0" >Submit</el-dropdown-item>
<el-dropdown-item command="1">Reviewed</el-dropdown-item>
<el-dropdown-item command="2">Confirm</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button size="small" icon="el-icon-refresh-left" v-cloak v-on:click="add">Reject</el-button>
<el-button size="small" icon="el-icon-upload2" v-cloak v-on:click="add">Import</el-button>
<el-button size="small" icon="el-icon-download" v-cloak v-on:click="add">Export</el-button>
</el-row>
<el-table :data="tableData" size="small"
:cell-style="{'font-size': '10px',}"
v-on:selection-change="handleSelectionChange" border
:header-cell-style="getRowClass">
<el-table-column type="selection" width="37"></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 background
v-on:current-change="handleCurrentChange"
current-page.sync="currentPage"
:page-size="10"
layout="prev, pager, next "
:total="total">
</el-pagination>
</div>
<div v-if="isLoaded" class="el-loading-mask">
<div class="el-loading-spinner">
<svg viewBox="25 25 50 50" class="circular">
<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
</svg>
<div class="el-loading-text">
Loading...
</div>
</div>
</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;
this.isLoaded=false;
},
data:{
options:[],
isLoaded :true,
status: '',
no:'',
timed:'',
begin:'',
end:'',
tableData:[],
total:1,
multipleSelection:[],
},
methods: {
change1(val) {
console.log(val);
if(val.length==2){
this.begin=val[0];
this.end=val[1];
}
},
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;'
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(val);
},
changestatush(val,index){
console.log(val,index);
},
handleCurrentChange(val) {
console.log(val);
this.tableData= [{
date: '2016-05-02',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1518 弄',
}
]
},
}
});
</script>
</script>
</body>
</html>