element-ui +vue实现行数据自动勾选——toggleRowSelection

夏假鱼

于 2021-04-08 16:11:11 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： vue elementui 前端

本文链接：https://blog.csdn.net/weixin_42404174/article/details/115522828

本文介绍了如何使用Element-UI和Vue实现表格行数据的联动勾选功能。当子数据全选时，自动勾选对应的主数据行；非全选时，则取消勾选。内容包括关键代码实现，如给表格添加ref属性，监听子数据选择的change事件，判断全选状态，并使用toggleRowSelection方法控制行的勾选状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务需求
主数据table展开依次渲染子数据，（通过@expand-change控制），当全选子数据时，默认勾选对应行的主数据，非全选时取消勾选主数据行。
截图展示
全选

非全选（包括有禁用）

在这里插入图片描述

代码部分
业务代码已删除，仅保留处理逻辑。
（1）给需要控制添加自动勾选的el-table加上ref属性

 <el-table
    ref="mutipleTable"
    :data="tableData"
    height="87vh"
    style="width: 100%"
    stripe
    :row-key="getRowKey"
    :expand-row-keys="expands"
    :default-sort = "{prop: 'owner'}"
    @expand-change="expandChange"
    @filter-change="handleFilterChange"
    @selection-change="handleSelectBundleJob"
    v-loading