iview 自定义树形

<template>
  <div class="hello">
    <div class="core">
      <div class="abs-zone" v-if="editZoneDisplayBoolean">
        <div class="box">
          <Input
            placeholder="Enter something..."
            style="200px"
            v-model="beforeSubmitNodeTitleString"
          />
          <Button type="success" :style="{marginLeft:'5px'}" @click="submitNameEditFunc(1)">
            <Icon type="md-checkmark" />
          </Button>
          <Button type="error" :style="{marginLeft:'5px'}" @click="submitNameEditFunc(0)">
            <Icon type="md-close" />
          </Button>
        </div>
      </div>
      <Tree :data="treedata" :render="renderContent"></Tree>
    </div>
  </div>
</template>

<script>
import { categoryTree, categoryChild } from "@/api/categorytree.js";
import { parseJson } from "@/libs/public.js";
export default {
  data() {
    return {
      root: null,
      editZoneDisplayBoolean: false,
      beforeSubmitNodeTitleString: "",
      edit_root: null,
      edit_node: null,
      edit_data: null,
      treedata: [
        {
          title: "parent 1",
          expand: true,
          render: (h, { root, node, data }) => {
            return h(
              "span",
              {
                style: {
                  display: "inline-block",
                   "100%"
                }
              },
              [
                h("span", [
                  h("Icon", {
                    props: {
                      type: "ios-folder-outline"
                    },
                    style: {
                      marginRight: "8px"
                    }
                  }),
                  h("span", data.title)
                ]),
                h(
                  "span",
                  {
                    style: {
                      display: "inline-block",
                      float: "right",
                      marginRight: "32px"
                    }
                  },
                  [
                    h("Button", {
                      props: Object.assign({}, this.buttonProps, {
                        icon: "ios-add",
                        type: "primary"
                      }),
                      style: {
                         "135px"
                      },
                      on: {
                        click: () => {
                          this.append(data);
                        }
                      }
                    })
                  ]
                )
              ]
            );
          },
          children: [
            {
              title: "child 1-1",
              expand: true,
              children: [
                {
                  title: "leaf 1-1-1",
                  expand: true
                },
                {
                  title: "leaf 1-1-2",
                  expand: true
                }
              ]
            },
            {
              title: "child 1-2",
              expand: true,
              children: [
                {
                  title: "leaf 1-2-1",
                  expand: true
                },
                {
                  title: "leaf 1-2-2",
                  expand: true
                }
              ]
            }
          ]
        }
      ],
      buttonProps: {
        type: "default",
        size: "small"
      }
    };
  },
  created() {
    this._categoryTree();
    // this._categoryChild();
  },
  methods: {
    // 所有类目树
    _categoryTree() {
      let data = {
        parentId: "" //类目id,不传查询所有
      };
      categoryTree(data).then(res => {
        if (res.data.code == 200) {
          let data = res.data.data || [];
          console.log(data);
          // this.treedata = data.map(org => this.mapTree(org));
          console.log("this.treedata", this.treedata);
        }
      });
    },
    //循环修改tree Key 值
    mapTree(org) {
      const haveChildren =
        Array.isArray(org.childCategories) && org.childCategories.length > 0;
      return {
        //分别将我们查询出来的值做出改变他的key
        title: org.category,
        isParent: org.isParent,
        id: org.id,
        parentId: org.parentId,
        // expand: org.isParent, //父级是否默认展开
        // data: { ...org }, //是否生成所有
        //判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
        children: haveChildren
          ? org.childCategories.map(i => this.mapTree(i))
          : []
      };
    },
    //异步加载数据
    // loadData(item, callback) {
    //   setTimeout(() => {
    //     const data = [
    //       {
    //         title: "children",
    //         loading: false,
    //         children: []
    //       },
    //       {
    //         title: "children",
    //         loading: false,
    //         children: []
    //       }
    //     ];
    //     callback(data);
    //   }, 1000);
    // },
    // 获取下一级类目列表
    _categoryChild() {
      let data = {
        parentId: "" //类目id,不传则查询根目录
      };
      categoryChild().then(res => {
        console.log("res", res);
      });
    },
    renderContent(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
             "100%"
          }
        },
        [
          h("span", [
            h("Icon", {
              props: {
                type: "ios-paper-outline"
              },
              style: {
                marginRight: "8px"
              }
            }),
            h("span", data.title)
          ]),
          h(
            "span",
            {
              style: {
                display: "inline-block",
                float: "right",
                marginRight: "32px"
              }
            },
            [
              // h("Button", {
              //   props: Object.assign({}, this.buttonProps, {
              //     icon: "ios-add"
              //   }),
              //   style: {
              //     marginRight: "8px"
              //   },
              //   on: {
              //     click: () => {
              //       console.log(222);
              //       // this.append(data);
              //     }
              //   }
              // }),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  // props: Object.assign({}, this.buttonProps, {
                  //   // icon: "ios-add"
                  // }),
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      console.log(222);
                      this.append(data);
                    }
                  }
                },
                "添加"
              ),
              h(
                "Button",
                {
                  props: Object.assign({}, this.buttonProps, {
                    // icon: "ios-remove"
                  }),
                  style: {
                    marginRight: "8px"
                  },
                  on: {
                    click: () => {
                      this.remove(root, node, data);
                    }
                  }
                },
                "删除"
              ),
              h(
                "Button",
                {
                  props: Object.assign({}, this.buttonProps, {
                    // icon: "ios-create"
                  }),
                  style: {
                    marginRight: "8px"
                  },
                  on: {
                    click: () => {
                      this.openEditName(root, node, data);
                    }
                  }
                },
                "编辑"
              )
              // h("Button", {
              //   props: Object.assign({}, this.buttonProps, {
              //     icon: "ios-arrow-round-up"
              //   }),
              //   on: {
              //     click: () => {
              //       this.toUp(root, node, data);
              //     }
              //   }
              // })
            ]
          )
        ]
      );
    },
    append(data) {
      const children = data.children || [];
      children.push({
        title: "appended node",
        expand: true
      });
      this.$set(data, "children", children);
    },
    remove(root, node, data) {
      const parentKey = root.find(el => el === node).parent;
      const parent = root.find(el => el.nodeKey === parentKey).node;
      const index = parent.children.indexOf(data);
      parent.children.splice(index, 1);
    },
    toUp(root, node, data) {
      const parentKey = root.find(el => el === node).parent;
      const parent = root.find(el => el.nodeKey === parentKey).node;
      const index = parent.children.indexOf(data);
      const children = parent.children;
      children.unshift({
        ...data
      });
      children.pop();
      this.$set(parent, "children", children);
    },
    openEditName(root, node, data) {
      this.editZoneDisplayBoolean = true;
      this.edit_root = root;
      this.edit_node = node;
      this.edit_data = data;
      this.beforeSubmitNodeTitleString = this.edit_node.node.title;
    },
    submitNameEditFunc(x) {
      if (!x) {
        this.editZoneDisplayBoolean = false;
        return;
      } else {
        this.edit_node.node.title = this.beforeSubmitNodeTitleString;
        this.editZoneDisplayBoolean = false;
        return;
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@edit-zone-height: 32px;

.core {
   500px;
  height: 400px;
  border: 1px solid #979797;
  border-radius: 5px;
  padding: 10px;
  overflow: hidden;
  position: relative;
  .abs-zone {
    position: absolute;
     100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1;
    .box {
      position: absolute;
       100%;
      top: 50%;
      left: 0;
      margin-top: -@edit-zone-height;
      text-align: center;
    }
  }
}
</style>