<!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/[email protected]/lib/theme-chalk/index.css"> <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> <script src="https://unpkg.com/[email protected]/lib/index.js"></script> </head> <body> <style> .el-row { margin-bottom: 5px; &:last-child;{ margin-bottom: 0; } } .the - 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> where dd = new Vue ({ on: ' #app ' , created(){ the this .options = [{value: ' option. 1 ' , label: ' Golden cake ' }, {value: ' Option 2 ' , label: ' Shuangpinai ' }, {value: ' option. 3 ' , label: ' oysters fried ' }, {value: ' option. 4 ' , label: ' Longxumian ' }, {value: ' option. 5 ' , label: ' Beijing duck ' }]; the this .tableData = [{ date: '2016-05-02', name: ' Xiaohu ' , closed:true, address: ' Jinsha River Road, Putuo District, Shanghai 1518, Lane ' , }, { date: '2016-05-04', name: ' Xiaohu ' , closed:true, address: ' Jinsha River Road, Putuo District, Shanghai 1517, Lane ' , }, { date: '2016-05-04', name: ' Xiaohu ' , closed:true, address: ' Jinsha River Road, Putuo District, Shanghai 1517, Lane ' , }, { date: '2016-05-04', name: ' Xiaohu ' , closed:true, address: ' Jinsha River Road, Putuo District, Shanghai 1517, Lane ' , }, { date: '2016-05-04', name: ' Xiaohu ' , closed:true, address: ' Jinsha River Road, Putuo District, Shanghai 1517, Lane ' , }, { date: '2016-05-04', name: ' Xiaohu ' , closed:true, address: ' Jinsha River Road, Putuo District, Shanghai 1517, Lane ' , }, { date: '2016-05-04', name: ' Xiaohu ' , closed:true, address: ' Jinsha River Road, Putuo District, Shanghai 1517, Lane ' , }, { date: '2016-05-04', name: ' Xiaohu ' , closed:true, address: ' Jinsha River Road, Putuo District, Shanghai 1517, Lane ' , }, { date: '2016-05-04', name: ' Xiaohu ' , closed:true, address: ' Jinsha River Road, Putuo District, Shanghai 1517, Lane ' , }, { date: '2016-05-04', name: ' Xiaohu ' , closed:true, address: ' Jinsha River Road, Putuo District, Shanghai 1517, Lane ' , }, ]; 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: ' Xiaohu ' , closed:true, address: ' Jinsha River Road, Putuo District, Shanghai 1518, Lane ' , } ] }, } }); </script> </script> </body> </html>