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;
}

你可能感兴趣的:(Vue,vue.js,javascript,前端,ant-design-vue)