要素ツリー カスタム ドラッグ xianz

目次

機能の説明:

レンダリング:

コード：

---

機能の説明:

1. ドラッグで変更可能、データの入れ子順
2. 第 1 レベルのノード (トランク): ドラッグ アンド ドロップはできず、兄弟ノードを持つことはできません。
3. トランク、トランクは 1 つだけに制限
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;
      },