記錄在vue3、ts、element-plus環境下表格單選和多選的實現方式

單選

html部分

<el-table...ref='taskTableRef'@select="selectClick"...
><el-table-column type="selection" width="50" />...
</el-table>

ts部分

const taskTableRef = ref() // 表格reflet chooseStr = ref<string>('')const selectClick = (selection: any, row: any) => {if (selection.length > 1) {let del_row = selection.shift()taskTableRef.value.toggleRowSelection(del_row, false)}if (Number(chooseStr.value) === row.id) {chooseStr.value = ''} else {chooseStr.value = row.id}
}

css部分

因為是單選，需要隱藏掉頂部一鍵全選框框

:deep(.el-table th.el-table__cell:nth-child(1) .cell) {visibility: hidden;
}

多選

html部分

<el-table...@selection-change="handleSelectionChange"...
><el-table-column type="selection" width="50" />...
</el-table>

ts部分

let chooseStr = ref<string>('')const multipleSelection = ref<any>([])// 這里限制多選最多只能選中十條線索，因此加了限制，不需要直接去除限制即可
const handleSelectionChange = (val: any) => {if (Number(val.length) > 10) {ElMessage({message: '一次性最多只能選中十條線索,超過十條默認取前十條線索！',type: 'warning'})multipleSelection.value = val.slice(0, 10)} else {multipleSelection.value = val}let arr: any = []multipleSelection.value.forEach((element: any) => {arr.push(element.id)})chooseStr.value = arr.join()
}