树形控件，用清晰的层级结构展示信息，可展开或折叠。

基础用法

基础的树形结构展示。

<template>
  <EBlock>
    选择结果：{{value}}
    <hr align="center" width="100%" color="#987cb9" size="3">
    <ETree v-model="value" :options="options" />
  </EBlock>
</template>
<script>
//  :option-value="optionValue"
const {cloneDeep, pick} = window['engage-common']['engage/lodash'];
const regions = [
  {
    id: 'cn',
    name: '中国',
    children: [
      {
        id: 'bj',
        name: '北京',
        children: [
          { id: 'chaoyang', name: '朝阳' },
          { id: 'haidian', name: '海淀' },
        ],
      },
      {
        id: 'ln',
        name: '辽宁',
        children: [
          { id: 'chaoyang1', name: '朝阳' },
        ],
      },
      { id: 'sh', name: '上海' },
    ],
  },
  {
    id: 'us',
    name: '美国',
    children: [
      { id: 'hsd', name: '华盛顿' },
      { id: 'jiazhou', name: '加州' },
    ],
  },
  {
    id: 'rs',
    name: '俄罗斯',
    children: [
      { id: 'msk', name: '莫斯科' },
      { id: 'llgl', name: '列林格勒' },
    ],
  },
  {
    id: 'uk',
    name: '英国',
  },
];

export default {
  data() {
    return {
      options: cloneDeep(regions),
      value: { "id": "hsd", "name": "华盛顿" },
    };
  },
};
</script>

自定义绑定值

设置 optionValue 可自定义绑定值，接收一个带有返回值的函数，建议返回一个 Object 类型。

<template>
  <EBlock>
    选择结果：{{value}}
    <ETree v-model="value" :options="options" :option-value="optionValue" />
  </EBlock>
</template>
<script>
const {cloneDeep, pick} = window['engage-common']['engage/lodash'];
const regions = [
  {
    id: 'cn',
    name: '中国',
    children: [
      {
        id: 'bj',
        name: '北京',
        children: [
          { id: 'chaoyang', name: '朝阳' },
          { id: 'haidian', name: '海淀' },
        ],
      },
      {
        id: 'ln',
        name: '辽宁',
        children: [
          { id: 'chaoyang1', name: '朝阳' },
        ],
      },
      { id: 'sh', name: '上海' },
      { id: 'gd', name: '广东' },
    ],
  },
  {
    id: 'us',
    name: '美国',
    children: [
      { id: 'hsd', name: '华盛顿' },
      { id: 'jiazhou', name: '加州' },
    ],
  },
  {
    id: 'rs',
    name: '俄罗斯',
    children: [
      { id: 'msk', name: '莫斯科' },
      { id: 'llgl', name: '列林格勒' },
    ],
  },
  {
    id: 'uk',
    name: '英国',
  },
];
export default {
  data() {
    return {
      options: cloneDeep(regions),
      value: { "id": "hsd", "name": "华盛顿" },
    };
  },
  methods: {
    optionValue(v) {
      return pick(v, 'name');
    },
  },
};
</script>

制定可操作按钮

通过设置具名 slot 为 suffix 为每个节点右侧添加一个可制定的元素，用于定制功能按钮。

<template>
  <EBlock>
    选择结果：{{value}}
    <hr align="center" width="100%" color="#987cb9" size="3">
    <ETree v-model="value" :options="options">
      <EDropdown slot="suffix" slot-scope="{option}" trigger="click" placement="bottom right" @click.stop>
        <EIcon name="ellipsis-v" font-size="16" style="padding: 0 8px;" />
        <EButton slot="popup" label="新建子节点" @click.stop="addChild(option)" />
      </EDropdown>
    </ETree>
  </EBlock>
</template>
<script>
const {cloneDeep, pick} = window['engage-common']['engage/lodash'];
const regions = [
  {
    id: 'cn',
    name: '中国',
    children: [
      {
        id: 'bj',
        name: '北京',
        children: [
          { id: 'chaoyang', name: '朝阳' },
          { id: 'haidian', name: '海淀' },
        ],
      },
      {
        id: 'ln',
        name: '辽宁',
        children: [
          { id: 'chaoyang1', name: '朝阳' },
        ],
      },
      { id: 'sh', name: '上海' },
    ],
  },
  {
    id: 'us',
    name: '美国',
    children: [
      { id: 'hsd', name: '华盛顿' },
      { id: 'jiazhou', name: '加州' },
    ],
  },
  {
    id: 'rs',
    name: '俄罗斯',
    children: [
      { id: 'msk', name: '莫斯科' },
      { id: 'llgl', name: '列林格勒' },
    ],
  },
  {
    id: 'uk',
    name: '英国',
  },
];

export default {
  data() {
    return {
      options: cloneDeep(regions),
      value: { id: 'chaoyang', name: '朝阳', remark: '多余字段不影响选中' },
    };
  },
  methods: {
    optionValue(v) {
      return pick(v, 'id', 'name');
    },
    addChild(option) {
      if (!option.children) {
        this.$set(option, 'children', []);
      }
      option.expanded = true;
      option.children.push(this.newNode());
    },
    newNode() {
      if (!this.seq) this.seq = 0;
      this.seq += 1;
      return {
        id: this.seq,
        name: `新建节点${this.seq}`,
        children: [],
      };
    },
  },
};
</script>

选中任意节点

设置selectMode 属性为 any 可选中任意节点，绑定值为当前选中节点数据。

<template>
  <EBlock>
    选择结果：{{value}}
    <hr align="center" width="100%" color="#987cb9" size="3">
    <ETree v-model="value" :options="options" select-mode="any" />
  </EBlock>
</template>
<script>
const {cloneDeep, pick} = window['engage-common']['engage/lodash'];
const regions = [
  {
    id: 'cn',
    name: '中国',
    children: [
      {
        id: 'bj',
        name: '北京',
        children: [
          { id: 'chaoyang', name: '朝阳' },
          { id: 'haidian', name: '海淀' },
        ],
      },
      {
        id: 'ln',
        name: '辽宁',
        children: [
          { id: 'chaoyang1', name: '朝阳' },
        ],
      },
      { id: 'sh', name: '上海' },
      { id: 'gd', name: '广东' },
    ],
  },
  {
    id: 'us',
    name: '美国',
    children: [
      { id: 'hsd', name: '华盛顿' },
      { id: 'jiazhou', name: '加州' },
    ],
  },
  {
    id: 'rs',
    name: '俄罗斯',
    children: [
      { id: 'msk', name: '莫斯科' },
      { id: 'llgl', name: '列林格勒' },
    ],
  },
  {
    id: 'uk',
    name: '英国',
  },
];
export default {
  data() {
    return {
      options: cloneDeep(regions),
      value: { "id": "hsd", "name": "华盛顿" },
    };
  },
};
</script>

多选

设置 multiple 属性为 true，可让组件多选。父子节点选中联动，绑定值为叶节点集合，配合 selectMode 使用，父子节点选中没有联动，选中哪些节点就是哪些节点。

<template>
  <EBlock>
    multiple结果：{{value}}
    <ETree v-model="value" :options="options" multiple />
    <hr align="center" width="100%" color="#987cb9" size="3">
    <hr align="center" width="100%" color="#987cb9" size="3">
    配合select-mode="any"结果：{{value2}}
    <ETree v-model="value2" :options="options2" multiple select-mode="any" />
  </EBlock>
</template>
<script>
const {cloneDeep, pick} = window['engage-common']['engage/lodash'];
const regions = [
  {
    id: 'cn',
    name: '中国',
    children: [
      {
        id: 'bj',
        name: '北京',
        children: [
          { id: 'chaoyang', name: '朝阳' },
          { id: 'haidian', name: '海淀' },
        ],
      },
      {
        id: 'ln',
        name: '辽宁',
        children: [
          { id: 'chaoyang1', name: '朝阳' },
        ],
      },
      { id: 'sh', name: '上海' },
      { id: 'gd', name: '广东' },
    ],
  },
  {
    id: 'us',
    name: '美国',
    children: [
      { id: 'hsd', name: '华盛顿' },
      { id: 'jiazhou', name: '加州' },
    ],
  },
  {
    id: 'rs',
    name: '俄罗斯',
    children: [
      { id: 'msk', name: '莫斯科' },
      { id: 'llgl', name: '列林格勒' },
    ],
  },
  {
    id: 'uk',
    name: '英国',
  },
];
export default {
  data() {
    return {
      options: cloneDeep(regions),
      value: null,
      options2: cloneDeep(regions),
      value2: null,
    };
  },
};
</script>

ETree

Slots

Name	Description	Default Slot Content
name	-	-

MixIns

MixIn
TreeMixin