记录在vue3、ts、element-plus环境下表格单选和多选的实现方式
单选
html部分
<el-table
...
ref='taskTableRef'
@select="selectClick"
...
>
<el-table-column type="selection" width="50" />
...
</el-table>
ts部分
const taskTableRef = ref() // 表格ref
let 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()
}