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

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

在使用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})
              } 
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Ant Design Vue中的Tree组件中,您可以使用异步加载数据来实现选中父节点就展开子节点的功能。以下是实现该功能的步骤: 1. 定义Tree节点的数据源,包括节点的id、名称、父节点id等属性。 2. 在Tree组件中设置show-expand属性为true,这将显示展开和折叠图标。 3. 设置Tree组件的load-data属性,指定异步加载数据的方法,该方法将根据父节点id加载子节点数据。 4. 在Tree组件的节点模板中,使用 @click.native 事件监听节点的点击事件,并在事件处理程序中判断当前节点是否有子节点,如果有则展开,否则不展开。 下面是一个示例代码,用于实现选中父节点就展开子节点的功能: ```html <template> <a-tree :show-expand="true" :load-data="loadData" :tree-data="treeData" > <template slot-scope="{ data }"> <span :class="{'tree-node-disabled': data.disabled}" @click.native="handleClick(data)" > {{ data.title }} </span> </template> </a-tree> </template> <script> export default { data() { return { treeData: [], }; }, mounted() { this.loadData(null, (data) => { this.treeData = data; }); }, methods: { loadData(parent, callback) { // 根据父节点id加载子节点数据 // ... }, handleClick(node) { // 判断当前节点是否有子节点 if (node.children && node.children.length > 0) { // 展开子节点 node.expanded = !node.expanded; } }, }, }; </script> ``` 在上面的示例代码中,loadData方法用于异步加载节点数据,handleClick方法用于处理节点的点击事件。当用户单击节点,如果该节点有子节点,则会展开子节点,否则不会展开。请按照您的实际需求进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

芝士焗红薯

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

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

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

打赏作者

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

抵扣说明:

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

余额充值