elementUI增加同級下級

<template>
  <div>
    <el-row>
      <el-col :span="4">
        <el-button v-on:click="increase(1)" type="info">增加同級</el-button>
      </el-col>
      <el-col :span="4">
        <el-button v-on:click="increase(2)" type="info">增加下級</el-button>
      </el-col>
      <el-col :span="4">
        <el-button v-on:click="increase(3)" type="warning">修改</el-button>
      </el-col>
      <el-col :span="4">
        <el-button @click="del" type="danger">刪除</el-button>
      </el-col>
  
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-tree :default-expand-all=true :data="data" :props="defaultProps" :highlight-current=true @current-change="handleCurrentClick"></el-tree>
      </el-col>
    </el-row>
  </div>
</template>


<script>

export default {
  data() {
    return {
      checkedLevel:'',
      checkId: 1,
      dialogVisible: false,
      data: [{
        id: 1,
        label: '一級 1',
        children: [{
          id: 301,
          label: '二級 1-1',
          children: [{
            id: 1001,
            label: '三級 1-1-1'
          }]
        }]
      }, {
        id: 2,
        label: '一級 2',
        children: [{
          id: 302,
          label: '二級 2-1',
          children: [{
            id: 1002,
            label: '三級 2-1-1'
          }]
        }, {
          id: 303,
          label: '二級 2-2',
          children: [{
            id: 1003,
            label: '三級 2-2-1'
          }]
        }]
      }, {
        id: 3,
        label: '一級 3',
        children: [{
          id: 304,
          label: '二級 3-1',
          children: [{
            id: 1004,
            label: '三級 3-1-1'
          }]
        }, {
          id: 305,
          label: '二級 3-2',
          children: [{
            id: 1005,
            label: '三級 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleCurrentClick(data2, node) {//點擊節點，獲取當前節點信息
      this.checkId = data2.id
      
       console.log("this.checkId= ", this.checkId);
    },del() {
        this.$confirm('此操作將刪除該文件, 是否繼續?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {





console.log("刪除 ", this.checkId);








          this.$message({
            type: 'success',
            message: '刪除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          });          
        });
      },increase(level) {
        this.$prompt('請輸入目錄標題', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消'
        }).then(({ value }) => {



          if (level === 1) {
             console.log("增加同級 ", level+"_"+this.checkId+"_"+value);

          } else if(level === 2) {
             console.log("增加下級 ", level+"_"+this.checkId+"_"+value);

          } else if(level === 3) {
             console.log("修改 ", level+"_"+this.checkId+"_"+value);

          }


         



          this.$message({
            type: 'success',
            message: '你輸入目錄標題是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消輸入'
          });       
        });
      }
    }
  
};
</script>