Tree 树

基础使用

<template>
  <WmTree :data="treeData" searchShow placeholder="请输入"></WmTree>
</template>

<script>
  export default {
    data() {
      return {
        treeData: [
          {
            label: '一级 1',
            children: [
              {
                label: '二级 1-1',
                children: [
                  {
                    label: '三级 1-1-1',
                  },
                ],
              },
            ],
          },
          {
            label: '一级 2',
            children: [
              {
                label: '二级 2-1',
                children: [
                  {
                    label: '三级 2-1-1',
                  },
                ],
              },
              {
                label: '二级 2-2',
                children: [
                  {
                    label: '三级 2-2-1',
                  },
                ],
              },
            ],
          },
          {
            label: '一级 3',
            children: [
              {
                label: '二级 3-1',
                children: [
                  {
                    label: '三级 3-1-1',
                  },
                ],
              },
              {
                label: '二级 3-2',
                children: [
                  {
                    label: '三级 3-2-1',
                  },
                ],
              },
            ],
          },
        ],
      };
    },
  };
</script>

<style></style>

显示代码

懒加载

<template>
  <WmTree :load="loadNode" lazy :props="props"></WmTree>
</template>

<script>
  export default {
    data() {
      return {
        props: {
          label: 'name',
          children: 'zones',
          isLeaf: 'leaf',
        },
      };
    },
    methods: {
      loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'region' }]);
        }
        if (node.level > 1) return resolve([]);

        setTimeout(() => {
          const data = [
            {
              name: 'leaf',
              leaf: true,
            },
            {
              name: 'zone',
            },
          ];

          resolve(data);
        }, 500);
      },
    },
  };
</script>

<style></style>

显示代码

自定义节点

<template>
  <WmTree :data="treeData" searchShow placeholder="请输入">
    <template #prefix> 前- </template>
    <template #suffix> -后 </template>
  </WmTree>
</template>

<script>
  export default {
    data() {
      return {
        treeData: [
          {
            label: '一级 1',
            children: [
              {
                label: '二级 1-1',
                children: [
                  {
                    label: '三级 1-1-1',
                  },
                ],
              },
            ],
          },
        ],
      };
    },
  };
</script>

<style></style>

显示代码

Tree Attributes

参数	说明	类型	默认值
searchShow	是否节点过滤	boolean	false
placeholder	搜索框提示文案	string	''

Tree Slot

name	说明
prefix	文案前
suffix	文案后

其他属性

element-ui (opens new window)