Elementui tree节点树再次请求数据后会自动折叠，解决方案

首先出问题的源头就是它又重新请求节点树数据了，所以导致节点树刷新并折叠。

怎么解决呢?

之前观看Elementui Api的时候发现 有 default-expand-all 这样一个属性 ，于是我就想能不能动态给一个布尔值，这样不就等于实现了嘛。

可现实总是残酷的，我还是失败啦。

话不多哔哔，直接上代码。

解决方案一:

还是通过default-expand-all我有想到另一招，看下面。

<template>
  <div>
    <el-tree 
      style="width: 200px; border: 1px solid red; margin: 10px auto"
      :data="data" 
      :props="defaultProps"
      :default-expand-all="expand"
      v-if="isActive"
      @node-click="handleNodeClick">
    </el-tree>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      expand: false,
      isActive: true,
      data:[],
      defaultProps: {
        label:"names",
        children:"ch"
      }
    }
  },

  created() {
    this.getTreeList()
  },

  methods: {
    submit() {
      setTimeout(() => {
        this.getTreeList(); // 请求完事后重新刷新节点数
        this.isActive = false; // 点击请求后 让isActive变为false
        this.$nextTick(() => {
          this.expand = true; // 重新给expand赋值为true 
          this.isActive = true; // 在给isActive 赋值为true
        })
      }, 1000) // 点击提交请求接口 这里用setTimeout模仿
    },
    getTreeList() {
      axios({
        url:"http://localhost:8080/tree.json"
      }).then(res => {
        // console.log(res);
        this.data = Object.freeze(Object.assign([], res.data.data))
        console.log(this.data);
      })
    }
  }
}
</script>

这样也相当于是实现了重新请求数据节点树不会折叠啦！

不过这也有利有弊，大家酌情使用！

看下面第二种解决方案！！

第二种: 

node-key='treeId' // treeId 自己数据中的id  【大家别看别人中写的都是id 自己数据中唯一标识就是啥，就比如我的数据唯一标识就是treeId， 所以我就定义这个。数据如下！！！】

        {

            "names":"食品",

            "treeId":"1",

            "ch": [

                {

                    "names":"方便面",

                    "treeId":"1-1"        

                },

                {

                    "names":"鸡蛋",

                    "treeId":"1-2"        

                },

                {

                    "names":"面条",

                    "treeId":"1-3"        

                }

            ]

        },

:default-expanded-keys="expaAndList" // expaAndList 是一个数组 在data中定义。

<template>
  <div>
    <el-tree 
      style="width: 200px; border: 1px solid red; margin: 10px auto"
      :data="data" 
      :props="defaultProps"
      node-key='treeId'
      :default-expanded-keys="expaAndList"
      @node-click="handleNodeClick">
    </el-tree>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      data:[],
      expaAndList:[],
      defaultProps: {
        label:"names",
        children:"ch"
      }
    }
  },

  created() {
    this.getTreeList()
  },

  methods: {
    handleNodeClick(data) {
      this.expaAndList = data.treeId
    },
    submit() {
      setTimeout(() => {
        this.getTreeList()
      }, 1000) // 点击提交请求接口 这里用setTimeout模仿
    },
    getTreeList() {
      axios({
        url:"http://localhost:8080/tree.json"
      }).then(res => {
        // console.log(res);
        this.data = Object.freeze(Object.assign([], res.data.data))
        console.log(this.data);
      })
    }
  }
}
</script>

 这种方案也可以解决你的问题。

告辞啦！