1.需求

比如像这种需求，他这是点击某个节点时发送请求，然后获取他下面的子节点，把子节点追加上去，但是呢，如果只追加不默认展开的话就会有个问题，就是点击了，子元素追加了，但是没展开，就导致我需要手动点两次展开，用户体验不好
1.在template中：

<el-tree
  class="secondTree-tree haveChild"
  :data="treeData"
  node-key="classCode"
  highlight-current
  ref="menuTree"
  :props="defaultProps"
  style="overflow: scroll;"
  :style="{height: treeHeight + 'px'}"
  @node-click="handleNodeClick"
  :default-expanded-keys="defaultShowKeys" // 写个数组默认装展开节点的id,唯一标识，就是上面的node-key
>
  <span class="custom-tree-node" slot-scope="{ node, data }" @mouseover="treeMouseOver($event, data)" @mouseleave="treemouseLeave($event, data)" style="width: 100%;">
    <span class="tree-nood">{{ node.label }}</span>
    <span style="position: absolute;right: 0;" class="node-none" id="showhidden">
      <el-tooltip effect="dark" content="新增" placement="top" style="margin-left: 8px;">
        <span v-show="data.validFlag==='1' && data.showflag">
          <el-button
            type="text"
            size="mini"
            class="iconfont purchmanager-button-add"
            v-privilege="activeMenu + 'parentTreeNode'"
            @click="() => parentTreeNode(node, data, '1')">
            <icon-svg icon-class="iconjia1" />
          </el-button>
        </span>
      </el-tooltip>
      <el-tooltip effect="dark" content="修改" placement="top">
        <span v-show="data.validFlag==='1'">
          <el-button
            type="text"
            size="mini"
            class="iconfont purchmanager-button-edit"
            v-privilege="activeMenu + 'openEditWindow2'"
            @click="() => openEditWindow('2', data)">
            <icon-svg icon-class="iconbianji" />
          </el-button>
        </span>
      </el-tooltip>
      <el-tooltip effect="dark" content="停用" placement="top">
        <span v-show="data.validFlag==='1'">
          <el-button
            type="text"
            size="mini"
            class="iconfont purchmanager-button-stop"
            v-privilege="activeMenu + 'userStop1'"
            @click="() => userStop('stop', data)">
            <icon-svg icon-class="iconshanchu" />
          </el-button>
        </span>
      </el-tooltip>
      <el-tooltip effect="dark" content="启用" placement="top">
        <span v-show="data.validFlag==='0'">
          <el-button
            type="text"
            size="mini"
            class="iconfont purchmanager-button-use"
            v-privilege="activeMenu + 'userStop2'"
            @click="() => userStop('use', data)">
            <icon-svg icon-class="iconqiyong" />
          </el-button>
        </span>
      </el-tooltip>
    </span>
  </span>
</el-tree>

2.在data中：

data () {
	defaultShowKeys: [],
	defaultProps: {
      children: 'children',
      label: 'classDesc'
    },
    classDesc: ''
}

3.在methods中：

methods: {
  // 获取最外层父级元素
  doQuery () {
      let _this = this
      _this.axios.get('xxx/xxx/xxx/?classDesc=' + this.classDesc).then(function (res) {
        if (res.code === '0') {
          _this.treeData = res.data
          _this.treeData.forEach(item => {
            item.checkedflag = false // 默认添加一个属性，用于记录它的点击状态
            item.showflag = true
            item.children = []
          })
        }
      }).catch(function () {
      });
    },
	handleNodeClick (data) {
      let _this = this
      data.checkedflag = !data.checkedflag
      let params = {
        pageNum: 1,
        pageSize: 100000,
        parentCode: data.classCode,
        parentDesc: data.classDesc // 父类名称
      }
      _this.axios.get('xxx/xxx/xxx', {params: params}).then(function (res) {
        if (res.code === '0') {
          let tree = res.data.list
          tree.forEach(item => {
            for (let index in data.children) {
              if (item.classCode === data.children[index].classCode) {
                // _this.$refs.menuTree.remove(data.children[index])
                // _this.$refs.menuTree.append(item, data);
                return false;
              }
            }
            item.checkedflag = false
            _this.$refs.menuTree.append(item, data);
            let node = _this.$refs.menuTree.getNode(item)
            if (node.parent.parent.data.constructor === Array) {
              item.showflag = true
            } else if (node.parent.parent.data.constructor === Object) {
              // 如果祖父是对象就是第三级了，那么就不允许再新增
              item.showflag = false
            }
          })
          let arr = []
          if (data.children.length === 0) {
            data.checkedflag = false
          } else {
            if (data.checkedflag) { // 如果点击的状态是true,那么就存到数组里
              for (let index in _this.defaultShowNodes) {
                if (data.classCode === _this.defaultShowNodes[index]) {
                  // 如果已经存在就跳过
                  return false
                }
              }
              _this.defaultShowNodes.push(data.classCode)
            } else {
              // 如果是false,证明点击的是关闭，那么找到这个，从数组中删除
              _this.defaultShowNodes.forEach((item1, index) => {
                if (item1 === data.classCode) { // 判断当前节点是否存在， 存在就添加到要删除的数组里
                  arr.push(item1)
                }
                if (data.children.length > 0) {
                // 要判断儿子有没有展开的，如果儿子有展开的就要删除掉，否则，儿子的还是展开状态，父亲、爷爷辈的也会被展开，
                  for (let index in data.children) {
                    if (item1 === data.children[index].classCode) {
                      arr.push(item1)
                      return false;
                    }
                  }
                }
              })
            }
          }
          arr.forEach(item4 => {
            for (let index in _this.defaultShowNodes) {
              if (item4 === _this.defaultShowNodes[index]) {
                _this.defaultShowNodes.splice(index, 1)
                return false;
              }
            }
          })
        }
      }).catch(function () {
      });
    },
}