feat: update cascader

components/cascader/__tests__/__snapshots__/index.test.js.snap

@@ -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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">
+<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="">
-  <!----></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="">
+    <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>
 `;

components/cascader/demo/index.vue

@@ -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/>

components/cascader/demo/suffix.md

@@ -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>
+```
+

components/cascader/index.en-US.md

@@ -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`:

components/cascader/index.jsx

@@ -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 { options, $scopedSlots } = this
-      const names = getFilledFieldNames(fieldNames)
+      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 = []) {
+    flattenTree (options, props, ancestor = []) {
-      const names = getFilledFieldNames(fieldNames)
+      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 { showSearch, notFoundContent, $scopedSlots } = this
-      const names = getFilledFieldNames(fieldNames)
+      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,

components/cascader/index.zh-CN.md

@@ -26,6 +26,7 @@
 | popupVisible | 控制浮层显隐 | boolean | - |
 | showSearch | 在选择框中显示搜索框 | boolean | false |
 | size | 输入框大小，可选 `large` `default` `small` | string | `default` |
+| suffixIcon | 自定义的选择框后缀图标 | string \| VNode \| slot | - |
 | value(v-model) | 指定选中项 | string\[] | - |
 
 `showSearch` 为对象时，其中的字段：

components/icon/index.js

@@ -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,
     })