vue3 element-plus el-table表格toggleRowSelection方法选中无效

const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}

以上是element-plus官方的一个选中示例。如果我们新建一个row数据,发现就是勾选不上,延迟执行也不行

let row={
  date: '2016-05-03',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
multipleTableRef.value!.toggleRowSelection(row, undefined)

直到我看了一位博主写的文章,el-table源代码选中的row,是用的tableData的引用,简单说:
不管怎样遍历,toggleRowSelection方法传入的row,都要从表格tableData里取值,类似tableData[0]这样,或者tableData.forEach中的item

如果需要通过接口加载完表格数据,再回显勾选,那还需要写在nextTick函数里边,实例如下:

<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
const table = reactive({
  tableData: [],
  selected:[]//已选数据id
});
const tableRef = ref();
//获取表格数据
const getTable=()=> {
  getTableData(params).then((res) => {
  	table.tableData = res.data?? [];
    // 选中
    nextTick(() => {
      table.tableData.forEach(item => {
        let result = table.selected.find(row => row == item.id);
        if (result) {
          tableRef.value.toggleRowSelection(item, true);
        }
      });
    });
  })
}
</script>
Vue3中使用Element Plusel-table组件实现树形表格,并且希望在选中所有子节点时自动选中父节点,可以通过监听表格选中状态变化,并结合树形数据的结构特点来实现。具体步骤如下: 1. 使用`v-model`绑定表格选中行数据数组。 2. 通过计算属性或方法获取到所有的子节点。 3. 监听选中行数据的变化,当发现有子节点被选中时,遍历并检查其父节点是否已经在选中状态中,如果不是,则将其加入到选中数组中。 以下是一个简单的示例代码: ```html <template> <el-table :data="tableData" style="width: 100%" row-key="id" :tree-props="{ children: &#39;children&#39;, hasChildren: &#39;hasChildren&#39; }" v-model="checkedRowKeys" > <el-table-column type="selection" width="55"> </el-table-column> <!-- 其他列 --> </el-table> </template> <script> import { ref, computed } from &#39;vue&#39;; export default { setup() { const tableData = ref([...]); // 填充你的树形数据 const checkedRowKeys = ref([]); // 递归获取所有子节点 const getChildren = (data, childrenKey) => { return data.reduce((acc, item) => { const children = item[childrenKey]; if (children && children.length > 0) { acc = [...acc, ...getChildren(children, childrenKey)]; } acc.push(item); return acc; }, []); }; // 监听选中状态变化 const handleSelectionChange = (val) => { const childrenKeys = tableData.value.reduce((acc, item) => { const children = item.children; if (children && children.length > 0) { const childKeys = getChildren(children, &#39;children&#39;).map(child => child.id); acc = [...acc, ...childKeys]; } return acc; }, []); // 移除不需要的父节点 const filteredCheckedRowKeys = val.filter(key => !childrenKeys.includes(key)); // 添加选中的子节点对应的父节点 tableData.value.forEach((node) => { if (node.children && node.children.some(child => val.includes(child.id))) { filteredCheckedRowKeys.push(node.id); } }); checkedRowKeys.value = filteredCheckedRowKeys; }; return { tableData, checkedRowKeys, handleSelectionChange, }; }, }; </script> ``` 在上面的代码中,`tableData` 是包含树形数据的数组,`checkedRowKeys` 是用于绑定当前选中行的数组。`handleSelectionChange` 方法会在表格选中状态变化时被调用,它会处理子节点选中时父节点的选中状态。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值