antd-vue tree组件，默认展开所有节点（defaultExpandAll）

不念不忘少年蓝@ 2022-11-05 07:28 1060阅读 0赞

## 效果图： ##

![在这里插入图片描述][20210304161940448.png]

## 实现方法： ##

html:
    
    		 <a-tree v-if="leftModelTree.length" 解决异步加载数据后，展开所有节点失败的问题 :tree-data="leftModelTree" 数据源 :replaceFields="replaceFields" 自定义渲染字段title、key、children :defaultExpandAll="true" 展开所有节点 :default-selected-keys="treeCurrentKey" 默认高亮显示指定树节点 @select="clickTreeNode" >
              </a-tree>
    
    data:
    
    	  replaceFields: {
            children: 'children',
            title: 'title',
            key: 'key'
          },
          treeCurrentKey: ['0-0-0'],
          leftModelTree:[
          {
            title: '左边盖',
            key: '0-0',
            children: [
              {
                title: '左边盖模型1',
                key: '0-0-0'
              },
              {
                title: '左边盖模型2',
                key: '0-0-1'
              }
            ]
          },
          {
            title: '右边盖',
            key: '0-1',
            children: [
              { title: '右边盖模型1', key: '0-1-0' }
            ]
          },
          {
            title: '双联盖',
            key: '0-2',
            children: [
              { title: '双联盖模型1', key: '0-2-0' }
            ]
          },
          {
            title: '链轮',
            key: '0-3',
            children: [
              { title: '链轮模型1', key: '0-3-0' }
            ]
          },
          {
            title: '进气管',
            key: '0-4',
            children: [
              { title: '进气管模型1', key: '0-4-0' }
            ]
          }
    	]

methods:
    
    	clickTreeNode (selectedKeys, e) { //点击树节点触发的时间
          this.treeCurrentKey = [e.node.eventKey] // 选中节点的key值 0-0-0
        }

[20210304161940448.png]: /images/20221023/baa7193b7e0c4645aba2061da5831c05.png