elementui-tree树形,父节点与其子节点全选中只传父节点给后端

此方法父元素code与子元素code要有关联
例如:父code: 001002子code:001002001,001002002,001002002001,001002003,001002003001
或者:父code1子1-1,1-2,1-3,1-3-1,1-3-2

depTags 表示点击确定后拿到的树形选中的数组
this.depTags = this.$refs.tree.getCheckedNodes()

this.depTags = this.$refs.tree.getCheckedNodes()
let arr = JSON.parse(JSON.stringify(this.depTags))
for (let i = 0; i < arr.length; i++) {
  for (let j = i + 1; j < arr.length; j++) {
      if (arr[j].dictCode.indexOf(arr[i].dictCode) > -1) {
         this.depTags = this.depTags.filter(item => {
           return item.dictCode !== arr[j].dictCode
   })
}
在Vue.js的Element UI库,`el-table`组件提供了树形数据(tree structure)的支持,当用户想要实现树父节点勾选时子节点自动全选的功能,通常可以通过复写`default-checked-keys`属性和监听`@check-change`事件来实现。以下是一个简单的步骤说明: 1. 首先,在`data`定义一个数组,表示你的树形数据结构,并包含`默认选中父节点ID`: ```js data() { return { treeData: [ // 树形数据结构,包括parentKey字段关联父子节点 ], defaultCheckedKeys: , // 默认选中父节点ID }; } ``` 2. 在`<el-table>`标签内,设置`tree-props`以启用树状结构,以及`default-checked-keys`为默认选中父节点键值: ```html <template> <el-table :data="treeData" :tree-props="{children: 'children', parent: 'parentKey'}"> <!-- 其他表头和列配置 --> </el-table> </template> ``` 3. 当用户勾选或取消勾选某个父节点时,更新`default-checked-keys`来同步选择状态到所有子节点。这通常在`@check-change`事件处理程序完成: ```js <template> <!-- ... --> <el-table-column type="selection" @check-change="handleCheckChange"></el-table-column> <!-- ... --> </template> <script> methods: { handleCheckChange(row) { if (row.parentKey === this.defaultCheckedKeys) { // 如果是父节点 this.$set(this.defaultCheckedKeys, 0, row.key); // 更新默认选中父节点ID this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys); // 设置所有子节点选中状态 } }, } </script> ``` 这样,当你勾选父节点时,所有直接和间接的子节点都会被选中
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值