【ant-design】解决antd3.0版本TreeSelect组件初次点击面板消失

环境:

ant design 3.24.3

 

问题:

无论是用官方demo还是自己写的组件,初次点击展开按钮都会消失,第二次则不会

 

解决思路:

一开始我考虑的我的代码问题,然而我的同事直接复制我的代码到另外一个项目上并不会出现这个问题。

直接复制官方demo到项目中,也同样会出现这个问题。

这时我开始怀疑是否是安装的包有问题,故我从并尝试了几种安装包的方式(npm install,cnpm install ,yarn install....)

然而并没什么卵用╮(╯▽╰)╭

然后只能又换个思路,也许不是包的问题。

要不试试用一下Select会不会也有这个问题,毕竟他们两长得很像。

结果select并没有出现问题!然后重新点击TreeSelect,神奇的发现既然也不出现那个问题了!!!!!

难道是因为我点击了一次select?

我重新刷新页面,这次直接点TreeSelect,问题既然不出现了?这个bug神奇的解决了&#x

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现antd vue的TreeSelect组件异步加载所有节点数据,可以使用antd vue官方提供的treeData属性,结合loadData方法来实现。 首先,需要在TreeSelect组件中设置treeData属性为一个空的数组,用于存储异步加载的数据。 然后,通过设置loadData方法,来异步加载数据。loadData方法接收一个参数,参数是当前节点的value值。在loadData方法中,可以发送请求获取当前节点的子节点数据,并将数据添加到treeData数组中。 最后,在TreeSelect组件中设置treeData属性为异步加载后的数据,在loadData方法中,需要使用Vue.set方法来更新treeData数组。 以下是一个示例代码: ```vue <template> <a-tree-select v-model="selectedKeys" :tree-data="treeData" :load-data="loadData" :placeholder="'请选择节点'" /> </template> <script> import { TreeSelect } from "ant-design-vue"; export default { components: { "a-tree-select": TreeSelect }, data() { return { treeData: [], selectedKeys: [] }; }, methods: { async loadData(value) { const data = await this.fetchData(value); if (data) { this.treeData = Vue.set(this.treeData, value, data); } }, async fetchData(value) { // 发送请求获取子节点数据 } } }; </script> ``` 在上面的示例代码中,loadData方法中使用了async/await语法,来异步获取子节点数据。fetchData方法中可以发送请求,获取子节点数据。如果请求成功,将数据添加到treeData数组中,在这里需要使用Vue.set方法来更新treeData数组。最后,将treeData数组绑定到TreeSelect组件treeData属性上即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值