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

el-table初始化时根据传入数据选中某些行

el-table初始化时根据传入数据选中某些行

// 父组件
const mockTableData = ref<TableData[]>([
  {
    key: '111',
    value: 'Tom111',
    description: 'No. 189, Grove St, Los Angeles',
    selected: true,
  }
  ]);
# 子组件
<el-table
      :data="TableData"
      border
      class="edit-table"
      ref="editTableRef"
    >
   <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column label="key" width="120">
      <template #default="scope">{{ scope.row.key}}</template>
    </el-table-column>
    // 其他列省略
</el-table>

const selectable = (row: any) => {
  return !isEmpty(row);
};

onMounted(() => {
  props.TableData.forEach((row) => {
    editTableRef.value.toggleRowSelection(row, row?.selected || false);
  });
});

参考:

https://element-plus.org/zh-CN/component/table.html#%E5%A4%9A%E9%80%89


http://www.kler.cn/news/325628.html

相关文章:

  • HTML中的盒子模型(内置练习及答案)
  • 医院排班|医护人员排班系统|基于springboot医护人员排班系统设计与实现(源码+数据库+文档)
  • git 查看已经commit但是还没有push的所有文件变动内容
  • upsample nearest 临近上采样实现方式
  • Python: RAII:函数执行完毕,socket对象主动发送fin
  • golang Get: context deadline exceeded (Client.Timeout exceeded while aw
  • 第四届机器人、自动化与智能控制国际会议(ICRAIC 2024)征稿
  • Python 学习之生成图形验证码
  • 谷神后端$vs.proc.invoke.stock.loadMap
  • golang语法基础
  • 【大数据应用开发】2023年全国职业院校技能大赛赛题第01套
  • 基于php的助农生鲜销售系统
  • vmware 操作系统安装
  • 常见框架漏洞复现
  • IT运维挑战与对策:构建高效一体化运维管理体系
  • Chapter 2 - 1. Understanding Congestion in Fibre Channel Fabrics
  • Redis: RDB与AOF的选择和容灾备份以及Redis数据持久化的优化方案
  • X86架构(九)——保护模式的进入
  • Hive数仓操作(三)
  • 使用Vue.extend( ) 模仿 elementui 创建一个类似 message 消息提示框
  • AI大模型之旅-最强开源文生图工具Stable Diffusion WebUI 教程
  • Safari 浏览器中的 <audio> 标签的控件无效 - 解决方法
  • linux信号 | 学习信号三步走 | 全解析信号的产生方式
  • 数据结构双链表和循环链表
  • 高级主题:接口性能测试与压力测试
  • 0基础跟德姆(dom)一起学AI 数据处理和统计分析08-日期类型处理,Matplotlib介绍
  • 事务的四大特性(ACID)
  • 直接用Bash发送HTTP请求 —— 筑梦之路
  • 【代码随想录Day27】贪心算法Part01
  • C#基于SkiaSharp实现印章管理(10)