vue3+Ts表格点击当前行进行勾选

最新推荐文章于 2023-09-21 11:15:42 发布

十七�254

最新推荐文章于 2023-09-21 11:15:42 发布

阅读量1k

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_63522737/article/details/128577949

版权

vue3+Ts表格点击当前行进行勾选。

用表格的ref和@selection-change（点击勾选框勾选事件）和@row-click（点击当前行事件）其中ref在点击当前行中必须有

<el-table data="dataList" row-key="id" ref="tableRef"
  @selection-change="handleCurrentChange" @row-click="rowClick">
  <el-table-column type="selection" width="30"></el-table-column>
</el-table>

//获取当前行的数据
let multipleSelection = ref<any[]>([])
let tableRef = ref<any>(null)
const handleCurrentChange = (val: any | undefined) => {
  multipleSelection.value = toRaw(val)
}

//点击行选中这一行数据
const rowClick = (row:any, column:any, event:any) => {
  // 从已选中数据中 判断当前点击的是否被选中
  const selected = multipleSelection.value.some(item => item.organCode18 === row.organCode18)  // 是取消选择还是选中

  if (!selected) { // 不包含   代表选择
    multipleSelection.value.push(row)
    tableRef.value.toggleRowSelection(row, true);
  }else { // 取消选择
    var finalArr = multipleSelection.value.filter((item) => {
      return item.organCode18 !== row.organCode18
    })
    multipleSelection.value = finalArr  // 取消后剩余选中的
    tableRef.value.toggleRowSelection(row, false);
  }

}