Element Table常用設定:排序、自定義序列、列表彙總、設定斑馬線
阿新 • • 發佈:2018-12-18
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
-
<el-table :data="tableData2" style="width: 100%" :summary-method="getSummaries1" //彙總 show-summary //表尾是否顯示彙總 :default-sort = "{prop: 'date', order: 'descending'}" //設定預設排序列 :row-class-name="tableRowClassName"> //自定義斑馬線 <el-table-column label="序列" type="index" width="180" :index="indexMethod"> </el-table-column> <el-table-column prop="date" label="日期" sortable> </el-table-column> <el-table-column prop="name" label="姓名"> </el-table-column> <el-table-column prop="account" :sortable='true' :sort-method="sortChange1" label="賬戶金額"> </el-table-column> </el-table>
export default { data(){ return{ tableData2: [{ date: '2016-05-02', name: '王小虎', account:2000 }, { date: '2016-05-04', name: '王小虎', account:1996.36 }, { date: '2016-05-01', name: '王小虎', account:10263.9 }, { date: '2016-05-03', name: '王小虎', account:862 }], totalamount:15157.9, //分頁獲取的彙總值 } }, methods:{ tableRowClassName({row, rowIndex}) { if (rowIndex === 1) { return 'warning-row'; } else if (rowIndex === 3) { return 'success-row'; } return ''; }, sortChange1(a,b) { //排序 return a.account-b.account }, getSummaries1(param) { //設定彙總 const { columns, data } = param; const sums = []; columns.forEach((column, index) => { sums[0]='彙總'; sums[2]=this.totalamount }); return sums; }, indexMethod(index) { //設定序列號 return 'row'+index; } } }