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;
      },