UI中关于table表格的那些骚操作(小结)(2)

<el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" type="danger" plain v-if = "scope.row.buttonVisible" @click = "changeTable(scope.row.buttonVisible,scope.$index)">禁用该行</el-button> <el-button size="mini" type="primary" plain v-else @click = "changeTable(scope.row.buttonVisible,scope.$index)">启用该行</el-button> </template> </el-table-column>

在每一个data中添加buttonVisible字段，使用v-if/v-else指令实现按钮的显示与隐藏

{ date: '2016-05-10', name: '王大虎', address: '上海市普陀区金沙江路 1518 弄', zip: 200333, buttonVisible: true }

编写changeTable方法，点击按钮的时候更改buttonVisible的值

changeTable (buttonVisible, index) { this.tableData[index].buttonVisible = !buttonVisible }

给el-table添加row-style，并且将tableRowStyle方法传递给row-style

<el-table :data="tableData" border :row-style="tableRowStyle" >

编写tableRowStyle方法，根据每一行buttonVisible的值设置背景色

// 修改table tr行的背景色 tableRowStyle ({ row, rowIndex }) { if (this.tableData[rowIndex].buttonVisible === false) { return 'background-color: rgba(243,243,243,1)' } }