需求:table的多选栏太小,点击的时候要瞄着点,不然选不上,要求实现点击单行实现勾选
<ElTable
border
:data="tableDataD"
style="width: 100%"
max-height="500"
ref="multipleTableRef"
@selection-change="handleSelectionChange"
@row-click="handleRowChick"
><el-table-column type="selection" width="55" />
<el-table-column type="index" width="50" />
<el-table-column prop="variableName" label="Variable Name" />
<el-table-column prop="weight" label="Weight" />
</ElTable>
const weightList = ref([])
const handleSelectionChange = (val: any) => {
weightList.value = val
console.log(weightList)
}
const handleRowChick = (row) => {
const selected = weightList.value.some(
(item) => item.variableName === row.variableName
)
if (!selected) {
weightList.value.push(row)
multipleTableRef.value.toggleRowSelection(row)
} else {
const weightListNew = weightList.value.filter((item) => {
return item.variableName !== row.variableName
})
weightList.value = weightListNew
multipleTableRef.value.toggleRowSelection(row, false)
}
}