ant tree 增删改

效果

image.png

<template>
  <div class="knowledgeTree">
    <a-card>
      <a-tree @select="onSelect" :treeData="treeData" showLine>
        <template slot="custom" slot-scope="item">
          <div class="node">
            <span>{{ item.title }}</span>

            <span class="toolbar">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>添加</span>
                </template>
                <a-icon @click="(event)=> onAdd(event, item)" type="plus-circle-o"></a-icon>
              </a-tooltip>
              <a-tooltip placement="top">
                <template slot="title">
                  <span>修改</span>
                </template>
                <a-icon @click="(event)=> onEdit(event, item)" type="edit"></a-icon>
              </a-tooltip>
              <a-tooltip placement="top">
                <template slot="title">
                  <span>删除</span>
                </template>
                <a-icon @click="(event)=> onRemove(event, item)" type="minus-circle-o"></a-icon>
              </a-tooltip>
            </span>
          </div>
        </template>
      </a-tree>

      <a-modal
        title="新节点"
        :visible="visible"
        @ok="handleOk()"
        :confirmLoading="confirmLoading"
        @cancel="handleCancel"
      >
        <a-input placeholder="节点名称" v-model="node" />
      </a-modal>
    </a-card>
  </div>
</template>

export default {
  data() {
    return {
      treeData: [],
      visible: false,
      confirmLoading: false,
      node: "",
      curNode: {}
    };
  },
  mounted() {
    this.treeData = [
      {
        key: 1,
        title: "节点1",
        scopedSlots: { title: "custom" },
        children: [
          { key: 11, title: "节点11", scopedSlots: { title: "custom" } },
          { key: 12, title: "节点12", scopedSlots: { title: "custom" } },
          { key: 13, title: "节点13", scopedSlots: { title: "custom" } }
        ]
      }
    ];
  },
  methods: {
    // 递归查找
    searchOption(option, arr, type = "delect") {
      console.log(option, arr);
      for (let s = 0; s < arr.length; s++) {
        console.log(arr[s].key, option.key);
        if (arr[s].key === option.key) {
          if (type === "delect") {
            arr.splice(s, 1);
          } else {
            //这是模拟数据编辑数据
            this.$set(arr, s, {
              title: "12121212",
              key: "12121212",
              scopedSlots: { title: "custom" }
            });
          }
          break;
        } else if (arr[s].children && arr[s].children.length > 0) {
          // 递归条件
          this.searchOption(option, arr[s].children);
        } else {
          continue;
        }
      }
    },
    onSelect: (selectKeys, info) => {
      console.log("selected", selectKeys);
    },
    onAdd(event, item) {
      event.stopPropagation();
      console.log("add", item);
      this.node = item.title;
      this.visible = true;
      this.curNode = item


      if (item.children) {
        item.children.push({
          key: Math.random(),
          title: Math.random(),
          scopedSlots: { title: "custom" }
        });
      } else {
        this.$set(item, "children", [
          {
            key: Math.random(),
            title: Math.random(),
            scopedSlots: { title: "custom" }
          }
        ]);
      }
    },
    onEdit(event, item) {
      event.stopPropagation();
      this.$set(item, "title", "123456");
    },
    onRemove(envent, item) {
      event.stopPropagation();
      console.log("remove", item);
      this.searchOption(item, this.treeData);
    },
    handleOk() {
      this.curNode.title = '123'
      this.confirmLoading = true;

      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel() {
      this.visible = false;
    }
  }
};

.toolbar {
  display: none;
  margin-left: 200px;
}
.toolbar i {
  margin-left: 16px;
}
.node:hover .toolbar {
  display: inline;
}