feat: update cascader
parent
1d340a9154
commit
752c82df21
|
@ -5,11 +5,11 @@ exports[`Cascader can be selected 1`] = `
|
|||
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
|
||||
<div class="ant-cascader-menus-content">
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon">></span></li>
|
||||
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon">></span></li>
|
||||
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
|
||||
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
|
||||
</ul>
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Hangzhou<span class="ant-cascader-menu-item-expand-icon">></span></li>
|
||||
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -21,11 +21,11 @@ exports[`Cascader can be selected 2`] = `
|
|||
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
|
||||
<div class="ant-cascader-menus-content">
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon">></span></li>
|
||||
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon">></span></li>
|
||||
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
|
||||
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
|
||||
</ul>
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon">></span></li>
|
||||
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
|
||||
</ul>
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="West Lake" class="ant-cascader-menu-item">West Lake</li>
|
||||
|
@ -40,11 +40,11 @@ exports[`Cascader can be selected 3`] = `
|
|||
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="display: none;">
|
||||
<div class="ant-cascader-menus-content">
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon">></span></li>
|
||||
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon">></span></li>
|
||||
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
|
||||
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
|
||||
</ul>
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon">></span></li>
|
||||
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
|
||||
</ul>
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="West Lake" class="ant-cascader-menu-item ant-cascader-menu-item-active">West Lake</li>
|
||||
|
@ -67,8 +67,8 @@ exports[`Cascader popup correctly when panel is open 1`] = `
|
|||
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
|
||||
<div class="ant-cascader-menus-content">
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Zhejiang<span class="ant-cascader-menu-item-expand-icon">></span></li>
|
||||
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon">></span></li>
|
||||
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
|
||||
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -80,11 +80,11 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
|
|||
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
|
||||
<div class="ant-cascader-menus-content">
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon">></span></li>
|
||||
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon">></span></li>
|
||||
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
|
||||
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
|
||||
</ul>
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon">></span></li>
|
||||
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
|
||||
</ul>
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="West Lake" class="ant-cascader-menu-item">West Lake</li>
|
||||
|
@ -95,8 +95,9 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
|
|||
`;
|
||||
|
||||
exports[`Cascader support controlled mode 1`] = `
|
||||
<span tabindex="0" class="ant-cascader-picker"><input value="" type="text" readonly="true" class="ant-input ant-cascader-input ant-cascader-input "><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><i class="anticon anticon-cross-circle">
|
||||
<!----></i><i class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<span tabindex="0" class="ant-cascader-picker"><input value="" type="text" readonly="true" class="ant-input ant-cascader-input ant-cascader-input "><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><i class="ant-cascader-picker-clear anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
|
||||
</svg></i><i class="ant-cascader-picker-arrow anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
|
||||
</svg></i></span>
|
||||
`;
|
||||
|
|
|
@ -10,6 +10,7 @@ import Lazy from './lazy'
|
|||
import Search from './search'
|
||||
import Size from './size'
|
||||
import FieldsName from './fields-name'
|
||||
import Suffix from './suffix'
|
||||
|
||||
import CN from '../index.zh-CN.md'
|
||||
import US from '../index.en-US.md'
|
||||
|
@ -33,6 +34,7 @@ const md = {
|
|||
export default {
|
||||
category: 'Components',
|
||||
type: 'Data Entry',
|
||||
zhType: '数据录入',
|
||||
title: 'Cascader',
|
||||
subtitle: '级联选择',
|
||||
render () {
|
||||
|
@ -50,6 +52,7 @@ export default {
|
|||
<Search/>
|
||||
<Size/>
|
||||
<FieldsName />
|
||||
<Suffix />
|
||||
<api>
|
||||
<CN slot='cn' />
|
||||
<US/>
|
||||
|
|
|
@ -0,0 +1,58 @@
|
|||
|
||||
<cn>
|
||||
#### 后缀图标
|
||||
省市区级联。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Suffix
|
||||
Cascade selection box for selecting province/city/district.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-cascader style="margin-top: 1rem" :options="options" @change="onChange" placeholder="Please select">
|
||||
<a-icon type="smile" slot="suffixIcon" class="test"/>
|
||||
</a-cascader>
|
||||
<a-cascader suffixIcon="ab" style="margin-top: 1rem" :options="options" @change="onChange" placeholder="Please select" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
}],
|
||||
}],
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(value) {
|
||||
console.log(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -26,6 +26,7 @@
|
|||
| popupVisible | set visible of cascader popup | boolean | - |
|
||||
| showSearch | Whether show search input in single mode. | boolean\|object | false |
|
||||
| size | input size, one of `large` `default` `small` | string | `default` |
|
||||
| suffixIcon | The custom suffix icon | string \| VNode \| slot | - |
|
||||
| value(v-model) | selected value | string\[] | - |
|
||||
|
||||
Fields in `showSearch`:
|
||||
|
|
|
@ -7,8 +7,9 @@ import omit from 'omit.js'
|
|||
import KeyCode from '../_util/KeyCode'
|
||||
import Input from '../input'
|
||||
import Icon from '../icon'
|
||||
import { hasProp, filterEmpty, getOptionProps, getStyle, getClass, getAttrs } from '../_util/props-util'
|
||||
import { hasProp, filterEmpty, getOptionProps, getStyle, getClass, getAttrs, getComponentFromProp, isValidElement } from '../_util/props-util'
|
||||
import BaseMixin from '../_util/BaseMixin'
|
||||
import { cloneElement } from '../_util/vnode'
|
||||
|
||||
const CascaderOptionType = PropTypes.shape({
|
||||
value: PropTypes.string,
|
||||
|
@ -74,6 +75,7 @@ const CascaderProps = {
|
|||
popupVisible: PropTypes.bool,
|
||||
fieldNames: FieldNamesType,
|
||||
autoFocus: PropTypes.bool,
|
||||
suffixIcon: PropTypes.any,
|
||||
}
|
||||
|
||||
function defaultFilterOption (inputValue, path, names) {
|
||||
|
@ -88,7 +90,7 @@ function defaultSortFilteredOption (a, b, inputValue, names) {
|
|||
return a.findIndex(callback) - b.findIndex(callback)
|
||||
}
|
||||
|
||||
function getFilledFieldNames (fieldNames = {}) {
|
||||
function getFilledFieldNames ({ fieldNames = {}}) {
|
||||
const names = {
|
||||
children: fieldNames.children || 'children',
|
||||
label: fieldNames.label || 'label',
|
||||
|
@ -110,13 +112,13 @@ const Cascader = {
|
|||
},
|
||||
data () {
|
||||
this.cachedOptions = []
|
||||
const { value, defaultValue, popupVisible, showSearch, options, changeOnSelect, flattenTree, fieldNames } = this
|
||||
const { value, defaultValue, popupVisible, showSearch, options, flattenTree } = this
|
||||
return {
|
||||
sValue: value || defaultValue || [],
|
||||
inputValue: '',
|
||||
inputFocused: false,
|
||||
sPopupVisible: popupVisible,
|
||||
flattenOptions: showSearch ? flattenTree(options, changeOnSelect, fieldNames) : undefined,
|
||||
flattenOptions: showSearch ? flattenTree(options, this.$props) : undefined,
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
@ -135,7 +137,7 @@ const Cascader = {
|
|||
},
|
||||
options (val) {
|
||||
if (this.showSearch) {
|
||||
this.setState({ flattenOptions: this.flattenTree(this.options, this.changeOnSelect, this.fieldNames) })
|
||||
this.setState({ flattenOptions: this.flattenTree(this.options, this.$props) })
|
||||
}
|
||||
},
|
||||
},
|
||||
|
@ -218,8 +220,8 @@ const Cascader = {
|
|||
},
|
||||
|
||||
getLabel () {
|
||||
const { options, $scopedSlots, fieldNames } = this
|
||||
const names = getFilledFieldNames(fieldNames)
|
||||
const { options, $scopedSlots } = this
|
||||
const names = getFilledFieldNames(this.$props)
|
||||
const displayRender = this.displayRender || $scopedSlots.displayRender || defaultDisplayRender
|
||||
const value = this.sValue
|
||||
const unwrappedValue = Array.isArray(value[0]) ? value[0] : value
|
||||
|
@ -242,18 +244,18 @@ const Cascader = {
|
|||
}
|
||||
},
|
||||
|
||||
flattenTree (options, changeOnSelect, fieldNames, ancestor = []) {
|
||||
const names = getFilledFieldNames(fieldNames)
|
||||
flattenTree (options, props, ancestor = []) {
|
||||
const names = getFilledFieldNames(props)
|
||||
let flattenOptions = []
|
||||
const childrenName = names.children
|
||||
options.forEach((option) => {
|
||||
const path = ancestor.concat(option)
|
||||
if (changeOnSelect || !option[childrenName] || !option[childrenName].length) {
|
||||
if (props.changeOnSelect || !option[childrenName] || !option[childrenName].length) {
|
||||
flattenOptions.push(path)
|
||||
}
|
||||
if (option[childrenName]) {
|
||||
flattenOptions = flattenOptions.concat(
|
||||
this.flattenTree(option[childrenName], changeOnSelect, fieldNames, path)
|
||||
this.flattenTree(option[childrenName], props, path)
|
||||
)
|
||||
}
|
||||
})
|
||||
|
@ -261,8 +263,8 @@ const Cascader = {
|
|||
},
|
||||
|
||||
generateFilteredOptions (prefixCls) {
|
||||
const { showSearch, notFoundContent, $scopedSlots, fieldNames } = this
|
||||
const names = getFilledFieldNames(fieldNames)
|
||||
const { showSearch, notFoundContent, $scopedSlots } = this
|
||||
const names = getFilledFieldNames(this.$props)
|
||||
const {
|
||||
filter = defaultFilterOption,
|
||||
// render = this.defaultRenderFilteredOption,
|
||||
|
@ -308,6 +310,7 @@ const Cascader = {
|
|||
const { $slots, sPopupVisible, inputValue, $listeners } = this
|
||||
const { sValue: value, inputFocused } = this.$data
|
||||
const props = getOptionProps(this)
|
||||
const suffixIcon = getComponentFromProp(this, 'suffixIcon')
|
||||
const {
|
||||
prefixCls, inputPrefixCls, placeholder, size, disabled,
|
||||
allowClear, showSearch = false, ...otherProps } = props
|
||||
|
@ -318,7 +321,8 @@ const Cascader = {
|
|||
})
|
||||
const clearIcon = (allowClear && !disabled && value.length > 0) || inputValue ? (
|
||||
<Icon
|
||||
type='cross-circle'
|
||||
type='close-circle'
|
||||
theme='filled'
|
||||
class={`${prefixCls}-picker-clear`}
|
||||
onClick={this.clearSelection}
|
||||
key='clear-icon'
|
||||
|
@ -403,6 +407,19 @@ const Cascader = {
|
|||
attrs: getAttrs(this),
|
||||
}
|
||||
const children = filterEmpty($slots.default)
|
||||
const inputIcon = suffixIcon && (
|
||||
isValidElement(suffixIcon[0])
|
||||
? cloneElement(
|
||||
suffixIcon[0],
|
||||
{
|
||||
class: {
|
||||
[`${prefixCls}-picker-arrow`]: true,
|
||||
},
|
||||
},
|
||||
) : <span class={`${prefixCls}-picker-arrow`}>{suffixIcon}</span>) || (
|
||||
<Icon type='down' class={arrowCls} />
|
||||
)
|
||||
|
||||
const input = children.length ? children : (
|
||||
<span
|
||||
class={pickerCls}
|
||||
|
@ -417,7 +434,17 @@ const Cascader = {
|
|||
{this.getLabel()}
|
||||
</span> : null}
|
||||
{clearIcon}
|
||||
<Icon type='down' key='down-icon' class={arrowCls} />
|
||||
{inputIcon}
|
||||
</span>
|
||||
)
|
||||
|
||||
const expandIcon = (
|
||||
<Icon type='right' />
|
||||
)
|
||||
|
||||
const loadingIcon = (
|
||||
<span class={`${prefixCls}-menu-item-loading-icon`}>
|
||||
<Icon type='redo' spin />
|
||||
</span>
|
||||
)
|
||||
const cascaderProps = {
|
||||
|
@ -427,6 +454,8 @@ const Cascader = {
|
|||
value: value,
|
||||
popupVisible: sPopupVisible,
|
||||
dropdownMenuColumnStyle: dropdownMenuColumnStyle,
|
||||
expandIcon,
|
||||
loadingIcon,
|
||||
},
|
||||
on: {
|
||||
...$listeners,
|
||||
|
|
|
@ -26,6 +26,7 @@
|
|||
| popupVisible | 控制浮层显隐 | boolean | - |
|
||||
| showSearch | 在选择框中显示搜索框 | boolean | false |
|
||||
| size | 输入框大小,可选 `large` `default` `small` | string | `default` |
|
||||
| suffixIcon | 自定义的选择框后缀图标 | string \| VNode \| slot | - |
|
||||
| value(v-model) | 指定选中项 | string\[] | - |
|
||||
|
||||
`showSearch` 为对象时,其中的字段:
|
||||
|
|
|
@ -11,7 +11,7 @@ import {
|
|||
} from './utils'
|
||||
import warning from '../_util/warning'
|
||||
import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor'
|
||||
import { filterEmpty } from '../_util/props-util'
|
||||
import { filterEmpty, getClass } from '../_util/props-util'
|
||||
|
||||
// Initial setting
|
||||
VueIcon.add(...Object.keys(allIcons).map((key) => allIcons[key]))
|
||||
|
@ -51,6 +51,7 @@ const Icon = {
|
|||
)
|
||||
|
||||
const classString = classNames({
|
||||
...getClass(context),
|
||||
[`anticon`]: true,
|
||||
[`anticon-${type}`]: !!type,
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue