iview、element树控件自定义节点

这里以iview示例，其实两个框架都是一样的、iview官网已经有现成的案例了，但是对于第一次接触render函数或者还没接触render函数的来说有点懵，并且官网的案例一大坨，像我这种菜鸡第一次接触的时候看到也是非常头痛的

效果展示：

render函数用法参考我另一篇文章：render函数用法

代码示例：

<template>
  <Card class="page" dis-hover>
    <Row :gutter="15" class="mg-top-15">
      <Col span="8">
        <Card dis-hover class="treeBox">
          <Tree :data="treeData" :render="renderContent"></Tree>
        </Card>
      </Col>
    </Row>
    <Modal
      v-model="treeModalState"
      :title="treeModalTitle"
      @on-ok="treeModalState = false"
      @on-cancel="treeModalState = false"
    >
      <Input
        v-model="treeEditValue"
        placeholder="请输入分类名称"
        maxlength="20"
        style="width: 300px"
        v-if="treeModalTitle == '修改分类'"
      />
      <Input
        v-model="treeAddValue"
        placeholder="请输入分类名称"
        maxlength="20"
        style="width: 300px"
        v-if="treeModalTitle == '新增分类'"
      />
    </Modal>
  </Card>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      treeModalState: false,
      treeModalTitle: "",
      treeEditValue: "",
      treeAddValue: "",
      //   树控件数据
      treeData: [
        {
          title: "全部",
          expand: true,
          children: [
            {
              title: "2343434",
              expand: true,
              children: [
                {
                  title: "dfdfdf",
                },
                {
                  title: "fgfgfg",
                },
              ],
            },
            {
              title: "gbgngn2",
              expand: true,
              children: [
                {
                  title: "sdsdsd",
                },
                {
                  title: "cvvcv",
                },
              ],
            },
            {
              title: "gbgngn2",
              expand: true,
              children: [
                {
                  title: "sdsdsd",
                },
                {
                  title: "cvvcv",
                },
              ],
            },
            {
              title: "gbgngn2",
              expand: true,
              children: [
                {
                  title: "sdsdsd",
                },
                {
                  title: "cvvcv",
                },
              ],
            },
            {
              title: "gbgngn2",
              expand: true,
              children: [
                {
                  title: "sdsdsd",
                },
                {
                  title: "cvvcv",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    renderContent(h, { root, node, data }) {
      // h是一个函数，他能创造html元素
      //   h函数能接收三个参数，第一个是html标签的名称，第二个是props参数，如样式、事件等标签需要的基本在这配置，第三个就是子元素
      // root <Array>：树的根节点
      // node <Object>：当前节点
      // data <Object>：当前节点的数据，其实我们这里只需要data就行了

      // 父级节点
      let parent = h("Icon", {
        props: {
          type: "ios-folder-open",
          size: "14",
        },
        style: {
          marginRight: "8px",
          color: "#2D8CF0",
        },
      });
      // 无子节点
      let children = h("Icon", {
        props: {
          type: "ios-list-box-outline",
          size: "14",
        },
        style: {
          marginRight: "8px",
          color: "#2DB7F5",
        },
      });
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%",
          },
        },
        [
          h(
            "span",
            {
              style: {
                display: "inline-block",
              },
            },
            [
              // 给树节点不同的图标，有子节点跟没有子节点定义不同的图标
              (data.children && data.children.length) > 0 ? parent : children,
              h("span", data.title),
            ]
          ),
          h(
            "span",
            {
              style: {
                display: "inline-block",
                float: "right",
                marginRight: "16px",
              },
            },
            [
              h("Icon", {
                // h函数配置props值
                props: {
                  type: "ios-create-outline",
                  color: "#0079de",
                  size: "15",
                },
                //h函数配置事件，包括自定义事件
                on: {
                  click: () => {
                    console.log("当前节点", data.title);
                    this.treeModalState = true;
                    this.treeEditValue = data.title;
                    this.treeModalTitle = "修改分类";
                  },
                },
                // h函数配置原生的html属性
                attrs: {
                  title: "修改",
                },
              }),
              h("Icon", {
                style: {
                  marginLeft: "10px",
                },
                props: {
                  type: "ios-add-circle-outline",
                  color: "#06c160",
                  size: "15",
                },
                on: {
                  click: () => {
                    console.log("当前节点", data.title);
                    this.treeModalState = true;
                    this.treeModalTitle = "新增分类";
                  },
                },
                attrs: {
                  title: "新增",
                },
              }),

              h(
                "Poptip",
                {
                  style: {
                    marginLeft: "10px",
                  },
                  props: {
                    confirm: true,
                    transfer: true,
                    title: "是否确认删除吗?",
                  },
                  on: {
                    // 自定义事件写成字符串形式
                    "on-ok": () => {
                      console.log("删除节点");
                    },
                    "on-cancel": () => {
                      console.log("取消删除");
                    },
                  },
                  attrs: {
                    title: "删除",
                  },
                },
                [
                  h("Icon", {
                    props: {
                      type: "ios-trash-outline",
                      color: "#e74e59",
                      size: "15",
                    },
                    on: {
                      click: () => {
                        console.log("当前节点", data.title);
                      },
                    },
                    attrs: {
                      title: "删除",
                    },
                  }),
                ]
              ),
            ]
          ),
        ]
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 98%;
  min-height: 600px;
  margin: 15px auto;
  padding: 10px 10px;
  /deep/.ivu-table {
    background-color: transparent;
  }

  .treeBox {
    height: 400px;
    overflow-y: auto;
    /deep/ .ivu-tree-title {
      width: 100%;
    }
  }
  .treeBox::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 8px;
  }
  .treeBox::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); //webkit好像是为了兼容特定的浏览器
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #2d8cf0;
  }
  .treeBox::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
  }
}
</style>