<!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; } </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-on:click="add">Query</el-button> <el-button size="small" icon="el-icon-news" v-on:click="add">Create</el-button> <el-button size="small" icon="el-icon-edit" v-on:click="add">Revise</el-button> <el-button size="small" icon="el-icon-delete" v-on:click="add">Delete</el-button> <el-dropdown size="small" split-button type="primary" 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-on:click="add">Reject</el-button> <el-button size="small" icon="el-icon-upload2" v-on:click="add">Import</el-button> <el-button size="small" icon="el-icon-download" 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> <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:{ options:[], 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>
原文：https://www.cnblogs.com/LiuFengH/p/11099302.html