element-plus elplus el-table 表格树多选,存在子级时,父子级选中状态不关联

在Vue项目中,使用el-table组件构建菜单管理时,文章描述了一种情况:当选择包含子节点的父节点进行编辑时,如何防止子节点也被选中。通过监听select事件并利用toggleRowSelection方法,可以实现这一功能,确保父子级选中状态不关联。

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

当使用el-table且行存在children属性是,做菜单管理,选中父节点编辑,不希望选中子节点,则需要父子级不关联

代码JS部分


// 父子级不关联
const handleSelect = (selection, row) => {
  if (row.children && row.children.length > 0) {
    row.children.map(item => {
      xTable.value.toggleRowSelection(item, false)
    })
  }
  multipleSelection.value = xTable.value.getSelectionRows()
}

代码html

<el-table ref="xTable" :data="tableData" 
          @select="handleSelect" ></el-table>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

合法的咸鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值