本文主要是介绍el-tabel表格加个多选框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<template><div><el-checkbox v-model="checked" :disabled="checkedDis" @change="onAllSelectChange">多选框</el-checkbox>点击多选框，禁用列表复选框<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" :selectable="() => {return selectable;}" /><el-table-column label="日期" width="120"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-column prop="name" label="姓名" width="120" /><el-table-column prop="address" label="地址" show-overflow-tooltip /></el-table></div>
</template><script>
export default {data () {return {tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',status: 1}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-08',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-06',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-07',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],checked: false, // 多选checkedDis: false, // 禁用多选框selectable: true, // 禁用列表复选框multipleSelection: [] // 选中的数据}},methods: {// 多选框onAllSelectChange () {this.tableData.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row)})this.checkedDis = false// 点击多选框，禁用列表复选框this.selectable = this.multipleSelection.length > 0 ? false : true},// 全选handleSelectionChange (val) {// 有数据则禁用多选框this.checkedDis = val.length > 0this.multipleSelection = val}}
}
</script><style>
</style>这篇关于el-tabel表格加个多选框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
