ant-design-vue中默认展开树节点参数失效

需求

使用ant-design-vue框架,展开下拉树组件中全部树节点

解决方案

参数控制

使用 ant-design 框架中自带的 treeDefaultExpandAll 参数,将其设置为 true。

注意:这时候这个地方是不生效的,原因是此参数仅在该组件第一次渲染时有效。不仅仅是下拉树组件,ant-design 框架中所有具备 默认属性 的组件大多数都是这种逻辑。

所以如果当前 treeData 是通过接口获取的数据,则可以将下拉树组件通过 v-if 设置为 false,当treeData存在数据时设置为 true。

<template v-if="treeData.length!==0">
    <a-tree-select
        v-model='data'
        :tree-data='treeData'
        :treeDefaultExpandAll="true"
        placeholder='请选择数据'
    />
</template>

设置选中

获取 treeData 中的全部数据,将数据中父级id全部取出来,传给 treeExpandedKeys 参数,设置节点展开。

let treeDatas = lookForAllId(treeData);

function lookForAllId(data = [], arr = []) {
    for (let item of data) {
    arr.push(item.id);
    if (item.children && item.children.length)
        this.lookForAllId(item.children, arr);
    }
    return arr;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3Ant-Design-VueTree组件的用法与Vue2有些不同。以下是示例代码: ```html <template> <a-tree :tree-data="treeData" :draggable="true" :block-node="true" :show-line="true" :default-expanded-keys="defaultExpandedKeys" v-model:selected-keys="selectedKeys" @select="onSelect"> <template #title="{ key, title }"> <span> {{ title }} <a @click.stop="addNode(key)">Add</a> <a @click.stop="removeNode(key)">Delete</a> </span> </template> </a-tree> </template> <script> import { ref } from 'vue' export default { setup() { const treeData = ref([ { title: 'Parent 1', key: '0-0', children: [ { title: 'Child 1', key: '0-0-0' }, { title: 'Child 2', key: '0-0-1' } ] } ]) const defaultExpandedKeys = ref(['0-0']) const selectedKeys = ref([]) const addNode = (parentKey) => { const newNode = { title: 'New Node', key: `${parentKey}-${treeData.value.length}` } const parentNode = treeData.value.find(node => node.key === parentKey) if (!parentNode.children) { parentNode.children = [] } parentNode.children.push(newNode) treeData.value = [...treeData.value] } const removeNode = (key) => { const parentKey = key.split('-').slice(0, -1).join('-') const parentNode = treeData.value.find(node => node.key === parentKey) parentNode.children = parentNode.children.filter(node => node.key !== key) treeData.value = [...treeData.value] } const onSelect = (selectedKeys) => { console.log(selectedKeys) } return { treeData, defaultExpandedKeys, selectedKeys, addNode, removeNode, onSelect } } } </script> ``` 这个示例与Vue2的示例类似,只是我们使用了Vue3的Composition API来编写代码。我们使用了ref函数来创建响应式变量。在addNode和removeNode方法,我们使用了Vue3的响应式API来更新数据。当我们改变treeData的值时,我们必须通过解构赋值来创建一个新的数组来触发更新。注意,在Vue3,我们使用v-model来绑定selected-keys。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值