element plus table 表格，开启多选，增加复选框。设置忽略可选属性。获取选择的值 电脑版发表于：2024/12/25 15:27 element plus table 表格，要开启多选非常简单，手动添加一个 el-table-column，设 type 属性为 selection 即可； ``` <el-table-column type="selection" width="55" /> ``` [TOC] ### 通过selectable可以设置忽略可选属性 #### 比如忽略id为1，和2的 ``` <el-table-column type="selection" :selectable="selectable" width="55" /> const selectable = (row: User) => ![1, 2].includes(row.id) ``` #### 比如忽略审核状态checkStatus为1和4的 ``` <el-table-column type="selection" :selectable="selectable" width="55" /> // 限制一下可以选择的，把已经审核完成和审核失败的都过滤掉一下把 const selectable = (row: any) => [1, 4].includes(row.checkStatus) ``` #### 又比如过滤一下表格行中certificateUserDto数据为空的 ``` <el-table-column type="selection" :selectable="selectable" width="55" v-if="state.trainingProgram.isCertificate == 1" /> // 没有获取到证书的才能颁发证书 const selectable = (row: any) => row.certificateUserDto == null ``` ### 获取选中的值 想要获取获取选中的值这样即可：`labTableDataRef.value!.getSelectionRows()` ``` // 批量审核 const labTableDataRef = ref(null) const batchCheck = () => { let selectedRows = labTableDataRef.value!.getSelectionRows() if (selectedRows.length <= 0) { ElMessage.warning('请选择要操作的数据！') return } let idsStr = '' selectedRows.forEach((element: any) => { idsStr += element.id + ',' }) } ```
