vue3+ts+vite+element plus 实现table勾选、点击单行都能实现多选
2023-12-13 18:56:48
需求: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)
}
}
文章来源:https://blog.csdn.net/flhhly/article/details/134976245
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!