解决ant design vue使用tree select树选择器时父节点需要不可选中的问题

芝士焗红薯

于 2022-09-14 15:01:09 发布

阅读量5.4k

点赞数 1

分类专栏：前端 # vue 文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_44320032/article/details/126852645

版权

本文介绍了在使用Ant Design Vue的Tree Select组件时如何禁止父节点被选中。通过设置`selectable`属性为`false`，可以实现父节点不可选中的效果。如果需要进一步禁用节点，可以将`disabled`属性设为`true`。

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

在使用antv的tree select树选择器时，发现默认它的父节点是可以选中的。在用户使用的时候，很多时候是不需要选中的。

查看了他的api发现一个属性selectable，默认为true

所以我们只需要在给这个tree数组赋值的时候，给父节点赋selectable为false就可以了。

// 获取项目对应的政府性技能科目下拉框
      getMajorProject() {
        const url = `/specialbond/zwMhkZxzq/queryFundSubjectsTree`
        this.axios.get(url).then(res => {
          if (res.result) {
            let _menu = res.result
            _menu.forEach(item => {
              let children = []
              if(item.children) {
                item.children.forEach(itemC => {
                children.push({value: itemC.key, title: itemC.title})
              })
              this.fundSubjectsList.push({title: item.title, value: item.key, selectable:false, children: children})
              }