element tree自定义拖拽xianz

功能说明:

  1. 可通过拖拽改变,数据嵌套顺序
  2. 首层节点(主干):不可拖拽,不可以有同级节点
  3. 主干,限制仅有一个主干
  4. 主干:不可删除,可编辑,
  5. 子节点限制:如果节点为汉字类型就禁止添加下一级,即为末尾节点(叶子)

代码:

<el-tree
        :data="branchFrom.data"
        default-expand-all
        draggable
        node-key="id"
        :allow-drop="allowDrop"
        :allow-drag="allowDrag">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
              <span v-if="nodetotle(node.label)" 
                    style="color:#409EFF;margin-right: 10px;">{
         
  { node.label}}</span>
                        //逻辑符号蓝色
              <span v-else style="color:#888;">{
         
  { node.label}}</span>
            </span>
            <span>
              <el-button
              v-if="nodetotle(data.label)"
                class="el-icon-plus"
                type="text"
                size="mini"
                @click="() => append(data)">
                <!-- add -->
              </el-button>
              <el-button
                class="el-icon-edit"
                type="text"
                size="mini"
                @click="() => edit(node,data)">
                <!-- edit -->
              </el-button>
                <!-- v-if="node.label" -->
              <el-button
              v-if="branchFrom.data[0].id!==data.id"
                class="el-icon-delete"
                type="text"
                size="mini"
                @click="() => remove(node, data)">
                <!-- Delete -->
              </el-button>
            </span>
          </span>
      </el-tree>
//页面数据
          data: [{
          id: 1,
          label: 一级 1,
          children: [{
            id: 4,
            label: 二级 1-1,
            children: [{
              id: 9,
              label: 三级 1-1-1
            }, {
              id: 10,
              label: 三级 1-1-2
            }]
          }]
        }],
           


      //节点类型识别
      nodetotle(a){
        return a==and||a==not||a==or
      },
   

     //tree数据拖拽
      allowDrop(draggingNode, dropNode, type) {
            //限制首层仅有一个节点,其他节点不可并列
            if(!dropNode.parent.parent){
              return false
            }

        if (dropNode.data.label === 二级 3-1) {
          return type !== inner;
        } else {
          return true;
        }
      },

      allowDrag(draggingNode) {
        //首层节点禁止拖拽
        if(draggingNode.data.id==this.data[0].id){
          this.$message({
            message: 首个逻辑禁止拖拽,
            type: warning
          });
          return false
        }

        return draggingNode.data.label.indexOf(1) === -1;
      },
经验分享 程序员 微信小程序 职场和发展