Handle the disabled table multi-check box in elementUI
In the el-table-column type component with type selection, add :selectable='Method Name'
<el-table :data="tableData" v-loading="loading" max-height="570" stripe :header-cell-style="headerStyle" @selection-change="handleSelectionLeftChange"> <el-table-column type="selection" width="50" :selectable='selectEnable'> </el-table-column> <el-table-column prop="appName" label="Select a Product" align="center" width="350"> </el-table-column> </el-table>
Method functions
selectEnable(row, rowIndex) {
if ((item => item === )) {
return false
} else {
return true// Can't help }
}elementUI multi-select table disables a certain row and is not selected
First use the table component of element-ui
The specific code is as follows
<el-table :data="tableData"> <el-table-column type="selection" :selectable="selectHandle" label="Multiple choice" align="center"> </el-table-column> </el-table>
where tableData is bound to table data, set the type of the first column of the table to selection, which represents multiple selection.
The selectHandle() method bound by selectable is only valid for columns with type=selection, and the type is Function. The return value of Function is used to determine whether the CheckBox of this row can be checked. Next, you only need to set the return value in the selectHandle() method.
as follows:
//The data of this line can be obtained in the parameter row, and the index is the index of this line. //My need is to disable the first line, so when index === 0, return false selectHandle(row, index) {
return !(index === 0);
},The above is personal experience. I hope you can give you a reference and I hope you can support me more.