级联选择器。

基础示例

ECascader 组件默认支持通过设置 clearable 与 disabled 属性来控制组件清空与禁用。

<template>
  <EBlock class="e-cascader-showcase">
    <EBlock horizontal>
      <ECascader v-model="value" 
        :options="options"
        placeholder="请选择地址" style="margin: 10px; width: 300px;" />
      <EBlock style="padding: 10px; flex: 1;">
        {{ JSON.stringify(value) }}
      </EBlock>
      </EBlock>
       <EBlock style="margin: 0 10px; font-size: 16px;">
      clearable
    </EBlock>
      <EBlock horizontal>
      <ECascader v-model="value1" 
        :options="options"
        :option-value="optionValue"
        clear
        filter clearable placeholder="请选择地址" style="margin: 10px; width: 300px;" />
      <EBlock style="padding: 10px; flex: 1;">
        {{ JSON.stringify(value1) }}
      </EBlock>
      </EBlock>
       <EBlock style="margin: 0 10px; font-size: 16px;">
      disabled
    </EBlock>
      <EBlock horizontal>
      <ECascader v-model="value2" 
        :options="options"
        :option-value="optionValue"
        disabled
        filter clearable placeholder="请选择地址" style="margin: 10px; width: 300px;" />
      <EBlock style="padding: 10px; flex: 1;">
        {{ JSON.stringify(value2) }}
      </EBlock>
      </EBlock>
  </EBlock>
</template>
<script>
const {cloneDeep, pick} = window['engage-common']['engage/lodash'];

window.regions = [
  {
    id: 'cn',
    name: '中国',
    children: [
      {
        id: 'bj',
        name: '北京',
        children: [
          { 
            id: 'chaoyang',
            name: '朝阳',
            children: [
              { id: 'jiedao1', name: '朝阳某街道1' },
              { id: 'jiedao2', name: '朝阳某街道2' },
            ],
          },
          { id: 'haidian', name: '海淀' },
        ],
      },
      {
        id: 'ln',
        name: '辽宁',
        children: [
          { id: 'chaoyang1', name: '朝阳' },
        ],
      },
      { id: 'sh', name: '上海' },
      { id: 'gd', name: '广东' },
      { id: 'funan', name: '湖南' },
      { id: 'sd', name: '山东' },
      { id: 'sx', name: '山西' },
      { id: 'heb', name: '哈尔滨' },
      { id: 'cq', name: '重庆' },
      { id: 'hn', name: '海南' },
      { id: 'zj', name: '浙江' },
      { id: 'js', name: '江苏' },
      { id: 'gz', name: '贵州' },
    ],
  },
  {
    id: 'us',
    name: '美国',
    children: [
      { id: 'hsd', name: '华盛顿' },
      { id: 'jiazhou', name: '加州' },
    ],
  },
  {
    id: 'rs',
    name: '俄罗斯',
    children: [
      { id: 'msk', name: '莫斯科' },
      { id: 'llgl', name: '列林格勒' },
    ],
  },
  {
    id: 'uk',
    name: '英国',
    disabled: true,
  },
];

export default {
  name: 'ECascaderShowcase',
  data() {
    return {
      options: cloneDeep(window.regions),
      value: null,
      value1: null,
      value2: null,
    };
  },
  methods: {
    optionValue(v) {
      return pick(v, 'id', 'name');
    },
  },
};
</script>

支持 false 和 0

<template>
  <EBlock class="e-cascader-showcase">
    <EBlock horizontal>
      <ECascader v-model="value" 
        :options="options"
        :option-value="optionValue"
        clearable placeholder="请选择" style="margin: 10px; width: 300px;" />
      <EBlock style="padding: 10px; flex: 1;">
        {{ `value：${JSON.stringify(value)} ${value ? '，name 的类型：' + typeof value.name : ''}` }}
      </EBlock>
    </EBlock>
  </EBlock>
</template>
<script>
const {pick} = window['engage-common']['engage/lodash'];

export default {
  name: 'ECascaderShowcase',
  data() {
    return {
      options: [
        { id: '1', name: true },
        { id: '2', name: false },
        { id: '3', name: 0 },
        { id: '4', name: 'true' },
        { id: '5', name: 'false' },
        { id: '6', name: '0' },
        { id: '7', name: true, children: [
          { id: '71', name: true, children: [
            { id: '711', name: true },
            { id: '712', name: false },
            { id: '713', name: 0 },
            { id: '714', name: 'true' },
            { id: '715', name: 'false' },
            { id: '716', name: '0' },
          ] },
          { id: '72', name: false, children: [
            { id: '721', name: true },
            { id: '722', name: false },
            { id: '723', name: 0, children: [
              { id: '7231', name: true },
              { id: '7232', name: false },
              { id: '7233', name: 0 },
            ] },
          ] },
          { id: '73', name: 0 },
          { id: '74', name: 'true' },
          { id: '75', name: 'false' },
          { id: '76', name: '0' },
        ] },
      ],
      value: null,
    };
  },
  methods: {
    optionValue(v) {
      return pick(v, 'id', 'name');
    }
  },
};
</script>

多选

通过设置 multiple 属性来允许多选。

<template>
  <EBlock class="e-cascader-showcase">
    <EBlock horizontal>
      <ECascader v-model="value" 
        :options="options"
        :option-value="optionValue"
        :disabled="disable"
        multiple filter clearable placeholder="请选择地址" style="margin: 10px; width: 300px;" />
      <EBlock style="padding: 10px; flex: 1;">
        {{ JSON.stringify(value) }}
      </EBlock>
    </EBlock>
  </EBlock>
</template>
<script>
const {cloneDeep, pick} = window['engage-common']['engage/lodash'];

export default {
  name: 'ECascaderShowcase',
  data() {
    return {
      options: cloneDeep(window.regions),
      value: null,
      disable: false
    };
  },
  methods: {
    optionValue(v) {
      return pick(v, 'id', 'name');
    }
  },
};
</script>

筛选

设置 filter 属性将开启组件的筛选功能，默认筛选全部字段，添加 filterKeys 来支持对选定属性的筛选。

<template>
  <EBlock class="e-cascader-showcase">
   <EBlock style="margin: 0 10px; font-size: 16px;">
      filter
    </EBlock>
    <EBlock horizontal>
      <ECascader v-model="value" 
        :options="options"
        :option-value="optionValue"
        :disabled="disable"
        filter clearable placeholder="请选择地址" style="margin: 10px; width: 300px;" />
      <EBlock style="padding: 10px; flex: 1;">
        {{ JSON.stringify(value) }}
      </EBlock>
      </EBlock>
       <EBlock style="margin: 0 10px; font-size: 16px;">
      filter filterKeys=['name']
    </EBlock>
      <EBlock horizontal>
      <ECascader v-model="value1" 
        :options="options"
        :option-value="optionValue"
        :disabled="disable"
        :filter-keys="filterKeys"
        filter clearable placeholder="请选择地址" style="margin: 10px; width: 300px;" />
      <EBlock style="padding: 10px; flex: 1;">
        {{ JSON.stringify(value1) }}
      </EBlock>
      </EBlock>
  </EBlock>
</template>
<script>
const {cloneDeep, pick} = window['engage-common']['engage/lodash'];

const regions = [
  {
    id: 'cn',
    name: '中国',
    children: [
      {
        id: 'bj',
        name: '北京',
        children: [
          { 
            id: 'chaoyang',
            name: '朝阳',
            children: [
              { id: 'jiedao1', name: '朝阳某街道1' },
              { id: 'jiedao2', name: '朝阳某街道2' },
            ],
          },
          { id: 'haidian', name: '海淀' },
        ],
      },
      {
        id: 'ln',
        name: '辽宁',
        children: [
          { id: 'chaoyang1', name: '朝阳' },
        ],
      },
      { id: 'sh', name: '上海' },
      { id: 'gd', name: '广东' },
      { id: 'funan', name: '湖南' },
      { id: 'sd', name: '山东' },
      { id: 'sx', name: '山西' },
      { id: 'heb', name: '哈尔滨' },
      { id: 'cq', name: '重庆' },
      { id: 'hn', name: '海南' },
      { id: 'zj', name: '浙江' },
      { id: 'js', name: '江苏' },
      { id: 'gz', name: '贵州' },
    ],
  },
  {
    id: 'us',
    name: '美国',
    children: [
      { id: 'hsd', name: '华盛顿' },
      { id: 'jiazhou', name: '加州' },
    ],
  },
  {
    id: 'rs',
    name: '俄罗斯',
    children: [
      { id: 'msk', name: '莫斯科' },
      { id: 'llgl', name: '列林格勒' },
    ],
  },
  {
    id: 'uk',
    name: '英国',
    disabled: true,
  },
];

export default {
  name: 'ECascaderShowcase',
  data() {
    return {
      options: cloneDeep(regions),
      value:null,
      value1: null,
      disable:false,
      filterKeys:['name']
    };
  },
  methods: {
    optionValue(v) {
      return pick(v, 'id', 'name');
    },
  },
};
</script>

选项展示风格

ECascader 默认使用列表结构来展示下拉选项，组件也支持通过设置 type 属性来展示不同的下拉风格。当 type=tree 时，拉下选项将被渲染为一棵树。

<template>
  <EBlock class="e-cascader-showcase">
    <EBlock style="margin: 0 10px; font-size: 16px;">
      type="tree" 
    </EBlock>
    <EBlock horizontal>
      <ECascader v-model="value"
        type="tree" 
        :options="options"
        :option-value="optionValue"
        :disabled="disable"
        filter clearable placeholder="请选择地址" style="margin: 10px; width: 300px;" />
      <EBlock style="padding: 10px; flex: 1;">
        {{ JSON.stringify(value) }}
      </EBlock>
    </EBlock>
  </EBlock>
</template>
<script>
const {cloneDeep, pick} = window['engage-common']['engage/lodash'];

const regions = [
  {
    id: 'cn',
    name: '中国',
    children: [
      {
        id: 'bj',
        name: '北京',
        children: [
          { 
            id: 'chaoyang',
            name: '朝阳',
            children: [
              { id: 'jiedao1', name: '朝阳某街道1' },
              { id: 'jiedao2', name: '朝阳某街道2' },
            ],
          },
          { id: 'haidian', name: '海淀' },
        ],
      },
      {
        id: 'ln',
        name: '辽宁',
        children: [
          { id: 'chaoyang1', name: '朝阳' },
        ],
      },
      { id: 'sh', name: '上海' },
      { id: 'gd', name: '广东' },
      { id: 'funan', name: '湖南' },
      { id: 'sd', name: '山东' },
      { id: 'sx', name: '山西' },
      { id: 'heb', name: '哈尔滨' },
      { id: 'cq', name: '重庆' },
      { id: 'hn', name: '海南' },
      { id: 'zj', name: '浙江' },
      { id: 'js', name: '江苏' },
      { id: 'gz', name: '贵州' },
    ],
  },
  {
    id: 'us',
    name: '美国',
    children: [
      { id: 'hsd', name: '华盛顿' },
      { id: 'jiazhou', name: '加州' },
    ],
  },
  {
    id: 'rs',
    name: '俄罗斯',
    children: [
      { id: 'msk', name: '莫斯科' },
      { id: 'llgl', name: '列林格勒' },
    ],
  },
  {
    id: 'uk',
    name: '英国',
    disabled: true,
  },
];

export default {
  name: 'ECascaderShowcase',
  data() {
    return {
      options: cloneDeep(regions),
      value:null,
      value1: null,
      disable:false,
      filterKeys:['name']
    };
  },
  methods: {
    optionValue(v) {
      return pick(v, 'id', 'name');
    },
  },
};
</script>

自定义选中值

通过设置具名 slot 为 selected 可自定义绑定展示值。

<template>
  <EBlock class="e-select-showcase"
    <ECascader v-model="value" :options="options" 
        filter
        show-path
        placeholder="slot=selected"
        style="margin: 10px; width: 300px;" >
      <EBlock slot="selected" slot-scope="{option}" horizontal align="center start"
        style="flex: 1; height: 50px;">
        <ETag v-for="(item, ind) in option" :key="ind" :label="item.name" theme="info" style="margin: 0 4px;" />
      </EBlock>
    </ECascader>
  </EBlock>
</template>
<script>
const {cloneDeep, pick} = window['engage-common']['engage/lodash'];
export default {
  name: 'ECascaderShowcase',
  data() {
    return {
      options: cloneDeep(window.regions),
      value: null,
      selectedPath:null,
    };
  },
  methods: {
    optionValue(v) {
      return pick(v, 'id', 'name');
    },
  },
}
</script>

自定义选项

通过设置具名 slot 为 option 可自定义下拉选项。

<template>
  <EBlock class="e-select-showcase">
    <ECascader v-model="value" :options="options" 
        show-path @selected-path="v=>selectedPath=v" 
        placeholder="slot=option"
        filter
        style="margin: 10px; width: 300px;" >
      <EBlock slot="option" slot-scope="{option}" horizontal align="center start" style="height: 50px; flex: 1;">
        <EIcon name="user" />
        <EText>{{ option.name }}</EText>
      </EBlock>
    </ECascader>
  </EBlock>
</template>
<script>
const {cloneDeep, pick} = window['engage-common']['engage/lodash'];
export default {
  name: 'ECascaderShowcase',
  data() {
    return {
      options: cloneDeep(window.regions),
      value: null,
      selectedPath:null,
    };
  },
  methods: {
    optionValue(v) {
      return pick(v, 'id', 'name');
    },
  },
}
</script>

tree 类型时的自定义选中值

通过设置具名 slot 为 selected 可自定义绑定展示值。

<template>
  <EBlock class="e-select-showcase">
    <ECascader v-model="value" :options="options" 
        show-path
        filter
        type="tree"
        placeholder="slot=selected"
        style="margin: 10px; width: 300px;" >
      <EBlock slot="selected" slot-scope="{option}" horizontal align="center start"
        style="flex: 1; height: 50px;">
        <ETag v-for="(item, ind) in option" :key="ind" :label="item.name" theme="info" style="margin: 0 4px;" />
      </EBlock>
    </ECascader>
  </EBlock>
</template>
<script>
const {cloneDeep, pick} = window['engage-common']['engage/lodash'];
export default {
  name: 'ECascaderShowcase',
  data() {
    return {
      options: cloneDeep(window.regions),
      value: null,
      selectedPath:null,
    };
  },
  methods: {
    optionValue(v) {
      return pick(v, 'id', 'name');
    },
  },
}
</script>

tree 类型时的自定义选项

组件的 type 属性为 tree 时，设置匿名 slot 默认自定义下拉选项。

<template>
  <EBlock class="e-select-showcase">
    <ECascader v-model="value" :options="options" 
        show-path @selected-path="v=>selectedPath=v" 
        placeholder="请选择"
        filter
        type="tree"
        style="margin: 10px; width: 300px;" >
      <EBlock slot-scope="{option}" horizontal align="center start" style="height: 50px; flex: 1;">
        <EIcon name="user" />
        <EText>{{ option.name }}</EText>
      </EBlock>
    </ECascader>
  </EBlock>
</template>
<script>
const {cloneDeep, pick} = window['engage-common']['engage/lodash'];
export default {
  name: 'ECascaderShowcase',
  data() {
    return {
      options: cloneDeep(window.regions),
      value: null,
      selectedPath:null,
    };
  },
  methods: {
    optionValue(v) {
      return pick(v, 'id', 'name');
    },
  },
}
</script>

tree 类型时的节点选项

组件的 type 属性为 tree 时，设置 selectMode 来控制是否只能选中叶节点，默认selectMode=leaf，value 只是选中的叶节点

<template>
  <EBlock class="e-select-showcase">
    <EBlock>
      <EText> multiple=false && selectMode=any: 可以选中父节点。value 是选中的任意节点 </EText>
    </EBlock>
    <ECascader v-model="value1" :options="options" 
        show-path @selected-path="v=>selectedPath=v" 
        placeholder="请选择"
        filter
        type="tree"
        selectMode="any"
        style="margin: 10px; width: 300px;" >
      <EBlock slot-scope="{option}" horizontal align="center start" style="height: 50px; flex: 1;">
        <EIcon name="user" />
        <EText>{{ option.name }}</EText>
      </EBlock>
    </ECascader>
     <EBlock>
      <EText> multiple=false && selectMode=leaf: 只能选中叶节点。value 只是选中的叶节点 </EText>
    </EBlock>
     <ECascader v-model="value2" :options="options" 
        show-path @selected-path="v=>selectedPath=v" 
        placeholder="请选择"
        filter
        type="tree"
        selectMode="leaf"
        style="margin: 10px; width: 300px;" >
      <EBlock slot-scope="{option}" horizontal align="center start" style="height: 50px; flex: 1;">
        <EIcon name="user" />
        <EText>{{ option.name }}</EText>
      </EBlock>
    </ECascader>
     <EBlock>
      <EText> multiple=true && selectMode=any: 选中父节点时，不会联动选择其所有子节点。value 包括所有选中节点 </EText>
    </EBlock>
     <ECascader v-model="value3" :options="options" 
        show-path @selected-path="v=>selectedPath=v" 
        placeholder="请选择"
        filter
        type="tree"
        selectMode="any"
        multiple
        style="margin: 10px; width: 300px;" >
      <EBlock slot-scope="{option}" horizontal align="center start" style="height: 50px; flex: 1;">
        <EIcon name="user" />
        <EText>{{ option.name }}</EText>
      </EBlock>
    </ECascader>
     <EBlock>
      <EText> multiple=true && selectMode=leaf: 选中父节点时，会联动选择其所有子节点。value 只有选中的子节点 </EText>
    </EBlock>
     <ECascader v-model="value4" :options="options" 
        show-path @selected-path="v=>selectedPath=v" 
        placeholder="请选择"
        filter
        type="tree"
        multiple
        selectMode="leaf"
        style="margin: 10px; width: 300px;" >
      <EBlock slot-scope="{option}" horizontal align="center start" style="height: 50px; flex: 1;">
        <EIcon name="user" />
        <EText>{{ option.name }}</EText>
      </EBlock>
    </ECascader>
  </EBlock>
</template>
<script>
const {cloneDeep, pick} = window['engage-common']['engage/lodash'];
export default {
  name: 'ECascaderShowcase',
  data() {
    return {
      options: cloneDeep(window.regions),
      value1: null,
      value2: null,
      value3: null,
      value4: null,
      selectedPath:null,
    };
  },
  watch: {
  },
  methods: {
    optionValue(v) {
      return pick(v, 'id', 'name');
    },
  },
}
</script>

自定义筛选项

通过设置具名 slot 为 filter-item 可自定义筛选项，设置 slot 为 filter-item-selected 可以自定义选中样式。

<template>
  <EBlock class="e-select-showcase">
    <ECascader v-model="value" :options="options" 
        show-path
        filter
        placeholder="请选择"
        style="margin: 10px; width: 300px;" >
      <EBlock slot="filter-item" slot-scope="{option}" horizontal align="center start"
        style="flex: 1; height: 50px;">
        <ETag :label="item.label" theme="info" style="margin: 0 4px;" />
      </EBlock>
      <EIcon slot="filter-item-selected"/>
    </ECascader>
  </EBlock>
</template>
<script>
const {cloneDeep, pick} = window['engage-common']['engage/lodash'];
export default {
  name: 'ECascaderShowcase',
  data() {
    return {
      options: cloneDeep(window.regions),
      value: null,
      selectedPath:null,
    };
  },
  methods: {
    optionValue(v) {
      return pick(v, 'id', 'name');
    },
  },
}
</script>

获取路径上的所有节点

可以通过设置 showPath 属性与 selected-path 事件获取选定值路径上的所有节点。选定值后，组件将会调用绑定的事件处理函数，函数的为路径上所有节点的数组。

<template>
<EBlock horizontal>
      <ECascader v-model="value" :options="options" 
        show-path @selected-path="v=>selectedPath=v" 
        placeholder="请选择"
        style="margin: 10px; width: 300px;" />
      <EBlock style="padding: 10px; flex: 1;">
        value = {{ JSON.stringify(value) }} <br>
        selected-path = {{ JSON.stringify(selectedPath) }}
      </EBlock>
    </EBlock>
</template>
<script>
const {cloneDeep, pick} = window['engage-common']['engage/lodash'];
export default {
  name: 'ECascaderShowcase',
  data() {
    return {
      options: cloneDeep(window.regions),
      value: null,
      selectedPath:null,
    };
  },
  methods: {
    optionValue(v) {
      return pick(v, 'id', 'name');
    },
  },
}
</script>

loading

组件的 loading 属性用来控制是否显示 loading 效果。

<template>
  <EBlock class="e-cascader-showcase">
    <EBlock horizontal width="100%">
      <ECascader v-model="value" 
        :options="options"
        :option-value="optionValue"
        type="tree"
        loading
        multiple filter clearable placeholder="请选择地址" style="margin: 10px; width: 300px;" />
      <EBlock style="padding: 10px; flex: 1;">
        {{ JSON.stringify(value) }}
      </EBlock>
      </EBlock>
  </EBlock>
</template>
<script>
const {cloneDeep, pick} = window['engage-common']['engage/lodash'];

export default {
  name: 'ECascaderShowcase',
  data() {
    return {
      options: cloneDeep(window.regions),
      value: null,
      disable:false
    };
  },
  methods: {
    optionValue(v) {
      return pick(v, 'id', 'name');
    }
  },
};
</script>

ECascader

Props

Name	Description	Type	Required	Default
type	类型，使用什么风格展示。tree（只有一棵树）、tree-list（父节点是一棵树，叶节点是单独列表，并列显示）、 lists（每一层都是一个列表，并列显示）	String	false	lists
placeholder	占位文本	String	false	-
disabled	禁用	Boolean	false	-
clearable	是否可清空	Boolean	false	-
filter	true 表示使用内置的检索引擎。暂时不支持传入 function	Boolean / Function	false	-
filterKeys	filter筛选时支持筛选的属性字段，不设置时默认筛选全部字段	Array	false	-
loading	是否显示 loading 状态。如果为 true，则不会显示 options	Boolean	false	-
showPath	是否显示路径上的所有节点	Boolean	false	-

Events

Event Name	Description	Parameters
input	-	-

Slots

Name	Description	Default Slot Content
selected	已选中的值	-
name	-	-
name	-	-
name	-	-

MixIns

MixIn
EValidationMixin