当前位置: 首页 > 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/a/325628.html

相关文章:

  • CSS遮罩:mask
  • 下一代以区域为导向的电子/电气架构
  • 【面试】前端vue项目架构详细描述
  • K8s 一键部署 MongoDB 的 Replica-Set 和 MongoDB-Express
  • 独立开发:一人公司模式下副业产品的全流程
  • Ajax的相关内容
  • 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 消息提示框