element树形结构图优化

优化（可以根据父元素的id来生成与父元素关联的id，有规律的id，不想原来element新添加的就是从1000开始，这样当你的id到达一定值时会有一些不必要的麻烦！！！） 

菜鸟分享，大佬勿喷！！

<template>
  <div>
    <div class="right-content">
      <div class="content">
        <div class="left_nav">
          <div class="btnOne" @click="()=>appendOne(data)">新增</div>
          <div class="custom-tree-container">
            <div class="block">
              <el-tree
                :data="data"
                node-key="id"
                default-expand-all
                :expand-on-click-node="false"
                @node-click="handleNodeClick"
              >
                <span
                  class="custom-tree-node"
                  style="width:100%;display:flex;justify-content: space-between;"
                  slot-scope="{ node, data }"
                >
                  <span>{{ node.label }}</span>
                  <span style="margin-right:10px;">
                    <el-button type="text" size="mini" @click="() => edit(node,data)">编辑</el-button>
                    <el-button type="text" size="mini" @click="() => append(node,data)">新增</el-button>
                    <el-button type="text" size="mini" @click="() => remove(node, data)">删除</el-button>
                  </span>
                </span>
              </el-tree>
            </div>
          </div>
        </div>
        <div class="right_nav">
          <ul>
            <li>
              <!-- <div>code：{{dataNew.code}}</div>
              <div>id：{{dataNew.id}}</div>
              <div>name：{{dataNew.name}}</div>
              <div>serviceId：{{dataNew.serviceId}}</div>
              <div>sort：{{dataNew.sort}}</div>
              <div>status：{{dataNew.status}}</div>
              <div>type：{{dataNew.type}}</div>
              <div v-html="'url：'+dataNew.url"></div>-->
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
import { parse } from "path";
import { _openMentList } from "../../server/service";
export default {
  data() {
    const data = [
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1"
              },
              {
                id: 10,
                label: "三级 1-1-2"
              }
            ]
          }
        ]
      },
      {
        id: 2,
        label: "一级 2",
        children: [
          {
            id: 5,
            label: "二级 2-1"
          },
          {
            id: 6,
            label: "二级 2-2"
          }
        ]
      },
      {
        id: 3,
        label: "一级 3",
        children: [
          {
            id: 7,
            label: "二级 3-1"
          },
          {
            id: 8,
            label: "二级 3-2"
          }
        ]
      }
    ];
    return {
      data: JSON.parse(JSON.stringify(data)),
    };
   
  },
  created() {
    
  },
  mounted() {},
  methods: {
    handleNodeClick(data) {
      //   this.dataNew = data;
      console.log(data);
    },
 
    edit(node, data) {
      this.$prompt("请输入菜单名", "菜单名", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          if (!value) {
            this.$message({
              type: "info",
              message: "取消输入"
            });
            return;
          }
          this.$message({
            type: "success",
            message: "你的菜单名是: " + value
          });
          data.label = value;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    appendOne(data) {
      var idI = "";
      for (var j = 0; j < data.length; j++) {
        idI = data[data.length - 1].id;
      }
      const newChild = {
        id: idI + 1,
        name: "默认名字",
        children: []
      };
      data.push(newChild);
    },
    append(node, data) {
      if (!data.children || !data.children.length) {
        const newChild = {
          id: parseInt(data.id) * 10 + 1,
          label: "默认名字" + data.id,
          children: []
        };
        alert(newChild.id);
        this.$set(data, "children", []);
        data.children.push(newChild);
      } else {
        var ids = "";
        for (let i = 0; i < data.children.length; i++) {
          ids = data.children[data.children.length - 1].id;
        }
        var newChild = { id: ids + 1, name: "默认名字", children: [] };
        data.children.push(newChild);
      }
    },

    remove(node, data) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex(d => d.id === data.id);
          children.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style scoped>
.btnOne {
  padding: 2px 6px;
  margin: 10px;
  border-radius: 2px;
  outline: none;
  width: 50px;
  text-align: center;
  cursor: pointer;
  border: solid 1px #cccccc;
}
.right-content {
  padding: 17px 30px;
  position: relative;
}
.right-content .content {
  width: 100%;
  height: auto;
  margin: 20px 0px;
  background: rgba(248, 248, 248, 1);
  border: 1px solid rgba(238, 238, 238, 1);
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.35);
}
.content {
  padding: 20px 30px;
  display: flex;
}
.right-content {
  padding: 17px 30px;
  position: relative;
}
.right-content .content {
  width: 100%;
  height: auto;
  margin: 20px 0px;
  background: rgba(248, 248, 248, 1);
  border: 1px solid rgba(238, 238, 238, 1);
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.35);
}

.content-bottom {
  border: 1px solid rgba(210, 210, 210, 1);
  padding: 10px;
  /* border-top: none; */
}
.content-left {
  position: absolute;
  right: 15px;
  top: 10px;
  cursor: pointer;
}
.left_nav {
  border: solid 1px #cccccc;
  width: 50%;
  height: auto;
}
.right_nav {
  border: solid 1px #cccccc;
  width: 100%;
  height: auto;
  margin-left: 5px;
}
</style>