当前位置: 首页 > news >正文

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

开发中会有对表格中进行默认选中的功能,element-plus官方有一个选中示例,如下

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

如果我们新建一个row数据,发现就是勾选不上,延迟执行也不行

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

通过查询得知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>

http://www.dtcms.com/a/85345.html

相关文章:

  • 23种设计模式-单例(Singleton)设计模式
  • 文件的分片上传vs流失上传
  • 【2025】基于node.js的中医药科普平台的设计与实现(源码、万字文档、图文修改、调试答疑)
  • 解决Enable-WindowsOptionalFeature : 功能名称 Microsoft-Hyper-V 未知。
  • Linux驱动开发进阶(二) - sysfs文件系统
  • html5炫酷的科技感3D文字效果实现详解
  • ROS多机通信(四)——Ubuntu 网卡 Mesh 模式配置指南
  • 拥抱成长型思维:解锁持续进步的人生密码
  • 于window环境下为tyora下载安装Pandoc
  • cpp11~17 新基础类型--long long
  • go常用标准库学习笔记
  • 3.22-UDP
  • 管家婆工贸ERP PR004.委外完工验收明细表
  • LeetCode 每日一题 2025/3/17-2025/3/23
  • 回顾Python基础语法,辨析和C++等的不同~
  • vulkanscenegraph显示倾斜模型(5.4)-相机操纵器
  • MCP(Model Context Protocol)好比大模型外挂!
  • 蓝桥杯C++基础算法-0-1背包
  • WEB PKI目前的问题
  • kotlin知识体系(三) : Android Kotlin 中的函数式编程实践指南
  • Docker学习笔记(十一)宿主机无法链接宿主机问题处理
  • UnoCSS极速入门:下一代原子化CSS引擎实战指南
  • 靶场(十五)---小白心得思路分析---LaVita
  • 【C++指针】搭建起程序与内存深度交互的桥梁(上)
  • Android LiveData 的 `setValue` 与 `postValue` 区别详解
  • Entity Framework框架
  • Crow:C++高性能微服务框架的深度探索
  • MyBatisPlus(SpringBoot版)学习第三讲:通用Service
  • 决策树基础
  • 代码随想录算法训练营第38天 | 322. 零钱兑换 279.完全平方数 139.单词拆分 背包问题总结