agel-form | 使用文档

# TreeSelect 树形选择器

agel-tree-select 组件是基于 el-select el-tree 组件的二次封装组件。

# 使用

options 属性支持多种数据类型，Array[Object]，Promise，Function，若是 Function 类型，可以通过 getRef 获取组件实例调用 getOptions 进行主动刷新。

value 属性多选时可为数组 [xx1,xx2] 或者字符串 xx1,xx2，逗号间隔，默认为字符串。

开启 lazy 懒加载时，nodeKey 只能绑定 props.label。

点击查看代码 
<template>
  <div class="demo border">
    <span>组件：</span>
    <agel-tree-select v-model="value" node-key="value" :options="data" filter>
      <span slot="option" class="custom-tree-node" slot-scope="{ node }">
        <i class="el-icon-eleme" style="color:#409EFF;margin-right:5px"></i>
        <span>{{ node.label }}</span>
      </span>
    </agel-tree-select>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      value: "1",
      data: [
        {
          label: "一级 1",
          value: "1",
          children: [
            {
              label: "二级 1-1",
              value: "1-1",
              children: [{ label: "三级 1-1-1", value: "1-1-1" }],
            },
          ],
        },
        { label: "二级 ", value: "2" },
      ],
    };
  },
};
</script>

# 演示

点击查看代码 
<template>
  <div class="demo border">
    <agel-form v-model="form"> </agel-form>
    <el-button type="primary" style="margin-left:100px" @click="getOptions">刷新 options</el-button>
    <el-button type="primary" @click="getRef">获取组件实例（查看控制台）</el-button>
    <el-button type="primary" @click="getItem">获取组件Item（查看控制台）</el-button>
  </div>

</template>
 
<script>
const treeData = [
  {
    label: "一级 1",
    value: "1",
    children: [
      {
        label: "二级 1-1",
        value: "1-1",
        children: [{ label: "三级 1-1-1", value: "1-1-1" }],
      },
    ],
  },
  {
    label: "一级 2",
    value: "2",
    children: [
      {
        label: "二级 2-1",
        value: "2-1",
        children: [{ label: "三级 2-1-1", value: "2-1-1" }],
      },
      {
        label: "二级 2-2",
        value: "2-2",
        children: [{ label: "三级 2-2-1", value: "2-2-1" }],
      },
    ],
  },
];
export default {
  data() {
    return {
      form: {
        labelWidth: "100px",
        span: 12,
        data: {
          tree1: "2",
          tree2: "1-1-1,2-1-1",
          tree4: "leaf",
        },
        items: [
          {
            prop: "tree1",
            label: "普通树形",
            component: "el-tree-select",
            nodeKey: "value",
            options: treeData,
          },
          {
            prop: "tree2",
            label: "多选树形",
            component: "el-tree-select",
            nodeKey: "value",
            multiple: true,
            leafOnly: true, // 只包含叶子节点
            options: treeData,
            on: {
              change: (v) => {
                console.log(this.form.getRef('tree2').getValueOption(v))
              },
            },
          },
          {
            prop: "tree3",
            label: "过滤树形",
            component: "el-tree-select",
            nodeKey: "value",
            filter: true,
            options: treeData,
          },
          {
            prop: "tree4",
            label: "懒加载树",
            component: "el-tree-select",
            multiple: true,
            nodeKey: "name", // 懒加载 nodeKey 只能绑定 props.label，其他无效
            lazy: true,
            props: {
              label: "name",
              children: "zones",
              isLeaf: "leaf",
            },
            load: (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);
            },
          },
          {
            prop: "tree5",
            label: "异步树形",
            component: "el-tree-select",
            nodeKey: "value",
            options: async () => {
              let data = await this.$http.get("/api/getRandomTreeData");
              return data;
            },
          },
          {
            prop: "tree6",
            label: "自定义树形",
            component: "el-tree-select",
            nodeKey: "value",
            options: this.$http.get("/api/getRandomTreeData"),
            slots: {
              option: ({ node, data }) => {
                return (
                  <span class="custom-tree-node">
                    <i
                      class="el-icon-eleme"
                      style="color:#409EFF;margin-right:5px"
                    ></i>
                    <span>{node.label}</span>
                  </span>
                );
              },
            },
            //renderContent: (h, { node, data, store }) => {}  使用 el-tree 该属性同样可实现
          },
        ],
      },
    };
  },
  methods: {
    getOptions() {
      this.form.getRef("tree5").getOptions();
    },
    getRef() {
      let tree = this.form.getRef("tree1");
      console.log(" ------ agel-tree-select 实例------ ", tree);
      console.log(" ------ el-tree 实例------", tree.$refs.ref);
      console.log(" ------ el-select 实例------", tree.$refs.select);
    },
    getItem() {
      console.log("items 可以是数组配置，getItem 快速获取对应对象进行修改");
      console.log(this.form.getItem("tree1"));
    },
  },
};
</script>

# TreeSelect Attributes

属性 类型 默认值 说明
value String/Array - 绑定值
options Array/Function/Promise - treeData 数据
nodeKey Boolean label 继承自 el-tree，绑定表单的字段名
props Boolean label 继承自 el-tree，数据配置选项
filter Boolean false 是否开启过滤查询
leafOnly Boolean false 是否只是叶子节点，多选生效
includeHalfChecked Boolean false 是否包含半选节点，多选生效
multiple Boolean false 是否多选
closableTags Boolean false 多选时标签是否关闭
collapseTags Boolean - 多选时标签是否可折叠
placeholder String - 继承自 el-select
disabled Boolean - 继承自 el-select
clearable Boolean - 继承自 el-select
popperClass String - 继承自 el-select
loadingText String - 继承自 el-select
...... ...... ......... el-tree 属性 (opens new window)

# TreeSelect Option

属性 类型 默认值 说明
label String - label 名称
style String/Object - 内联样式
class String/Object/Array - class名称
...... ...... ......... el-tree props 属性 (opens new window)

# TreeSelect Slots

属性 说明
prefix Select 组件头部内容
option 每一个选择项插槽，参数 {node,data}

# TreeSelect Methods

属性 参数 说明
focus - 聚焦
blur - 失焦
setSelected - 刷新 tree 选中状态
getOptions - 刷新数据， options 为 Function 时可调用
getValueOption - 返回 value 所对应的 option 对象，多选时为数组

# TreeSelect Events

属性 参数 说明
...... ...... 支持 el-tree 事件 (opens new window)
...... ...... 支持 el-select 事件 (opens new window)

← Upload 上传 →