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

vue3 element-plus 组件table表格 勾选框回显(初始化默认回显)完整静态代码

 

<template><el-table ref="multipleTableRef" :data="tableData" style="width: 100%"><el-table-column type="selection" width="55" /><el-table-column label="时间" width="120"><template #default="scope">{{ scope.row.date }}</template></el-table-column><el-table-column property="name" label="姓名" width="120" /><el-table-column property="address" label="地址" show-overflow-tooltip /></el-table>
</template><script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElTable } from 'element-plus'const multipleTableRef = ref<any>()
const tableData = [{id: '1',date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{id: '2',date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{id: '3',date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{id: '4',date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},]//部分显示,默认回显 id 为 1 的勾选框
const toggleSelection = (rows: any) => {console.log( multipleTableRef.value,'值必须不为空');console.log(rows, 'table全部数据');const ids = ['1', '2', '4']if (rows) {rows.forEach((row: any) => {if(row.id === '1'){  //单个情况回显// if (ids.includes(row.id)) { // 判断当前行是否为默认回显行  数组多个数据回显情况multipleTableRef.value!.toggleRowSelection(row, true) // 默认勾选} else {multipleTableRef.value!.toggleRowSelection(row, false) // 不选中}})} else {multipleTableRef.value!.clearSelection()}
}
onMounted(() => {// getTableData()toggleSelection(tableData)
})
</script>

http://www.lryc.cn/news/204063.html

相关文章:

  • Redis --- 安装教程
  • 代码阅读:LanGCN
  • 基于Java的校园餐厅订餐管理系统设计与实现(源码+lw+部署文档+讲解等)
  • 使用C#和Flurl.Http库的下载器程序
  • 面试经典150题——Day19
  • TP6首页加载报错 Call to a member function run() on null
  • 洗车小程序源码:10个必备功能,提升洗车体验
  • macOS telnet替代方式
  • 【leetcode】独特的电子邮件地址
  • 解密Java中神奇的Synchronized关键字
  • 微信删除的好友还能找回来吗?盘点5种超实用的方法!
  • Nmap 常用命令汇总
  • 谷歌浏览器最新版和浏览器驱动下载地址
  • [游戏开发][Unity]Unity运行时加载不在BuildSetting里的场景
  • flutter开发实战-hero动画简单实现
  • Spring Boot + EasyUI 创建第一个项目(一)
  • 短视频矩阵系统源码/技术应用搭建
  • 硬核子牙:我准备写一本《带你手写64位多核操作系统》的书!
  • c++访问修饰符与继承关系
  • 【RTOS学习】事件组 | 任务通知
  • 【TES605】基于Virtex-7 FPGA的高性能实时信号处理平台
  • Java Azure开发 使用已有token字符串创建GraphServiceClient
  • 【Qt】消息机制和事件
  • 爬虫模拟用户登录
  • asp.net企业招聘管理系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio计算机毕业设计
  • 艾泊宇产品战略:假如中国禁止直播带货,网红和店家该如何应对?
  • C#调用C/C++从零深入讲解
  • MyBatis篇---第五篇
  • 十三水中各种牌型判断LUA版
  • 2023.10.19 关于设计模式 —— 单例模式