elementUI增加同级下级

Posted 2020-09-25 影响力

<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>