ant tree 增删改

效果

image.png

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