el-tree相关问题

<template>
  <div id="app" style="padding:50px">
    <el-button type="primary" size="mini" @click="showAll">全部展开</el-button>
    <el-button type="primary" size="mini" @click="notShowAll">全部收缩</el-button>
    <div style="300px;height:500px;border:1px solid red; overflow: scroll;">
      <el-tree
        node-key="id"
        :data="treeData"
        :props="defaultProps"
        :default-expand-all="defaultExpand"
        :expand-on-click-node="false"
        ref="tree"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span v-if="data.status==0">{{ node.label }}</span>
          <el-input size="mini" v-else v-model="rename"></el-input>
          <span>
            <el-button type="text" size="mini">添加</el-button>
            <el-button type="text" size="mini">删除</el-button>
            <el-button type="text" size="mini" @click="change(node,data)">修改</el-button>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
import Children from "./components/children";

import { xxx } from "./mixins/mixins";
export default {
  mixins: [xxx],
  data() {
    return {
      rename: "",
      currentID: "",
      defaultExpand: true, //默认展开全部
      defaultProps: {
        children: "mychildrnes",
        label: "name"
      },
      treeData: [
        {
          name: "四川省",
          number: 105,
          parentsId: "",
          id: "1",
          mychildrnes: [
            {
              name: "成都市",
              number: 98,
              parentsId: "1",
              id: "11",
              mychildrnes: [
                {
                  name: "双流区",
                  number: 55,
                  parentsId: "11",
                  id: "111",
                  mychildrnes: [
                    {
                      name: "双流区地名1",
                      number: 55,
                      parentsId: "111",
                      id: "1111",
                      mychildrnes: []
                    },
                    {
                      name: "双流区地名2",
                      number: 15,
                      parentsId: "111",
                      id: "1112",
                      mychildrnes: []
                    }
                  ]
                },
                {
                  name: "高新区",
                  number: 66,
                  parentsId: "11",
                  id: "112",
                  mychildrnes: [
                    {
                      name: "高新区地名1",
                      number: 55,
                      parentsId: "112",
                      id: "1121",
                      mychildrnes: []
                    },
                    {
                      name: "高新区地名2中和",
                      number: 15,
                      parentsId: "112",
                      id: "1122",
                      mychildrnes: []
                    }
                  ]
                },
                {
                  name: "天府新区",
                  number: 88,
                  parentsId: "11",
                  id: "113",
                  mychildrnes: []
                }
              ]
            },
            {
              name: "绵阳市",
              number: 48,
              parentsId: "1",
              id: "12",
              mychildrnes: [
                {
                  name: "梓潼县",
                  number: 96,
                  parentsId: "12",
                  id: "121",
                  mychildrnes: []
                }
              ]
            }
          ]
        },
        {
          name: "云南省",
          number: 89,
          parentsId: "",
          id: "2",
          mychildrnes: []
        }
      ]
    };
  },

  methods: {
    repeat(array) {
      array.forEach(item => {
        item.name = item.name + "[" + item.number + "]";
        item.status = 0;
        if (item.mychildrnes.length !== 0) {
          //调用自己
          return this.repeat(item.mychildrnes);
        }
      });
    },
    showAll() {
      this.defaultExpand = true; //展开所有节点
      for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
        this.$refs.tree.store._getAllNodes()[i].expanded = this.defaultExpand;
      }
    },
    notShowAll() {
      //必须唯一键值  node-key="id"必须要不然不行

      this.defaultExpand = false; //收缩所有节点
      for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
        this.$refs.tree.store._getAllNodes()[i].expanded = this.defaultExpand;
      }
    },
    change(node, data) {
      //修改无非就在展示框和输入框之间切换v-if 切换 v-show不行（获取焦点有问题）

      this.rename = data.name;
      this.currentID = data.id;
      let arryHH=[] //vue 数组改变 不刷新问题
      this.treeData.forEach(item=>{
          arryHH.push(item)
      })
      
      for (let i = 0; i < arryHH.length; i++) {
        if (arryHH[i].id == this.currentID) {
          arryHH[i].status = 1;
          return;
        } else if (arryHH[i].mychildrnes.length !== 0) {
          this.repeatTwo(arryHH[i].mychildrnes);
        }
      }
      this.treeData=[]
     arryHH.forEach(item=>{
          this.treeData.push(item)
      })
      
      console.log(this.treeData, "++");
    },
    repeatTwo(array) {
      for (let i = 0; i < array.length; i++) {
        if (array[i].id == this.currentID) {
          array[i].status = 1;
          return;
        } else if (array[i].mychildrnes.length !== 0) {
          return this.repeatTwo(array[i].mychildrnes);
        }
      }
    }
  },
  created() {
    this.treeData.forEach(item => {
      item.name = item.name + "[" + item.number + "]";
      item.status = 0; //手动添加键值0 展示1 输入框可修改
      if (item.mychildrnes.length !== 0) {
        //递归循环（因为层级不止3级很可能是N级）
        this.repeat(item.mychildrnes);
      }
    });
    console.log(this.treeData);
  }
};
</script>

<style scope lang='scss'>
// 超出范围滚动条
.el-tree>.el-tree-node{
    min-100%;
    display: inline-block;
}
</style>