element Table 多选禁用
在Element UI的Table组件中,如果你想要某些行的多选框不可用,可以使用selectable
属性。这个属性接受一个方法,该方法会对每一行的数据进行判断,返回false
则该行的多选框会被禁用。
以下是一个简单的示例代码:
<template> <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" :selectable="selectableStatus" > </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 prop="address" label="地址" > </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '李小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '赵小虎', address: '上海市普陀区金沙江路 1519 弄', disabled: true }], }; }, methods: { handleSelectionChange(val) { console.log('选中的行:', val); }, selectableStatus(row, rowIndex) { // 如果行数据中有disabled属性,则返回false禁用多选 return !row.disabled; } } }; </script>
在这个例子中,我们定义了一个tableData
数组,其中包含了一些带有disabled
属性的数据对象。selectableStatus
方法会检查每行数据是否有disabled
属性,如果有,则返回false
,这样该行的多选框就会被禁用。