diff --git a/src/cascader/README.md b/src/cascader/README.md
index cd289495a..74171cf3e 100644
--- a/src/cascader/README.md
+++ b/src/cascader/README.md
@@ -54,8 +54,8 @@ export default {
};
},
methods: {
- onFinish(params) {
- const { selectedOptions } = params;
+ onFinish({ selectedOptions }) {
+ this.show = false;
this.fieldValue = selectedOptions.map((option) => option.text).join('/');
},
},
@@ -74,6 +74,63 @@ export default {
/>
```
+### Async Options
+
+```html
+
+
+
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ show: false,
+ fieldValue: '',
+ cascaderValue: '',
+ options: [
+ {
+ text: 'Zhejiang',
+ value: '330000',
+ children: [],
+ },
+ ],
+ };
+ },
+ methods: {
+ onChange({ value }) {
+ if (value === this.options[0].value) {
+ setTimeout(() => {
+ this.options[0].children = [
+ { text: 'Hangzhou', value: '330100' },
+ { text: 'Ningbo', value: '330200' },
+ ];
+ }, 500);
+ }
+ },
+ onFinish({ selectedOptions }) {
+ this.show = false;
+ this.fieldValue = selectedOptions.map((option) => option.text).join('/');
+ },
+ },
+};
+```
+
## API
### Props
diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md
index 3c8fac8b4..a39fad0f5 100644
--- a/src/cascader/README.zh-CN.md
+++ b/src/cascader/README.zh-CN.md
@@ -62,8 +62,8 @@ export default {
},
methods: {
// 全部选项选择完毕后,会触发 finish 事件
- onFinish(params) {
- const { selectedOptions } = params;
+ onFinish({ selectedOptions }) {
+ this.show = false;
this.fieldValue = selectedOptions.map((option) => option.text).join('/');
},
},
@@ -84,6 +84,65 @@ export default {
/>
```
+### 异步加载选项
+
+可以监听 `change` 事件并动态设置 `options`,实现异步加载选项。
+
+```html
+
+
+
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ show: false,
+ fieldValue: '',
+ cascaderValue: '',
+ options: [
+ {
+ text: '浙江省',
+ value: '330000',
+ children: [],
+ },
+ ],
+ };
+ },
+ methods: {
+ onChange({ value }) {
+ if (value === this.options[0].value) {
+ setTimeout(() => {
+ this.options[0].children = [
+ { text: '杭州市', value: '330100' },
+ { text: '宁波市', value: '330200' },
+ ];
+ }, 500);
+ }
+ },
+ onFinish({ selectedOptions }) {
+ this.show = false;
+ this.fieldValue = selectedOptions.map((option) => option.text).join('/');
+ },
+ },
+};
+```
+
## API
### Props
diff --git a/src/cascader/demo/index.vue b/src/cascader/demo/index.vue
index 69f2c9246..b938dae15 100644
--- a/src/cascader/demo/index.vue
+++ b/src/cascader/demo/index.vue
@@ -40,6 +40,27 @@
/>
+
+
+
+
+
+
+
@@ -54,12 +75,36 @@ export default {
options: zhCNOptions,
selectArea: '请选择地区',
customColor: '自定义颜色',
+ asyncOptions: '异步加载选项',
+ asyncOptions1: [
+ {
+ text: '浙江省',
+ value: '330000',
+ children: [],
+ },
+ ],
+ asyncOptions2: [
+ { text: '杭州市', value: '330100' },
+ { text: '宁波市', value: '330200' },
+ ],
},
'en-US': {
area: 'Area',
options: enUSOptions,
selectArea: 'Select Area',
customColor: 'Custom Color',
+ asyncOptions: 'Async Options',
+ asyncOptions1: [
+ {
+ text: 'Zhejiang',
+ value: '330000',
+ children: [],
+ },
+ ],
+ asyncOptions2: [
+ { text: 'Hangzhou', value: '330100' },
+ { text: 'Ningbo', value: '330200' },
+ ],
},
},
@@ -75,10 +120,28 @@ export default {
value: null,
result: '',
},
+ async: {
+ show: false,
+ value: null,
+ result: '',
+ options: [],
+ },
};
},
+ created() {
+ this.async.options = this.t('asyncOptions1');
+ },
+
methods: {
+ loadDynamicOptions({ value }) {
+ if (value === '330000') {
+ setTimeout(() => {
+ this.async.options[0].children = this.t('asyncOptions2');
+ }, 500);
+ }
+ },
+
onFinish(type, { value, selectedOptions }) {
const result = selectedOptions.map((option) => option.text).join('/');
this[type] = {
diff --git a/src/cascader/index.js b/src/cascader/index.js
index 31b771623..b48858653 100644
--- a/src/cascader/index.js
+++ b/src/cascader/index.js
@@ -29,8 +29,9 @@ export default createComponent({
},
watch: {
- options() {
- this.updateTabs();
+ options: {
+ deep: true,
+ handler: 'updateTabs',
},
value(value) {
diff --git a/src/cascader/test/__snapshots__/demo.spec.js.snap b/src/cascader/test/__snapshots__/demo.spec.js.snap
index 2124ea98e..8e4fb1c8d 100644
--- a/src/cascader/test/__snapshots__/demo.spec.js.snap
+++ b/src/cascader/test/__snapshots__/demo.spec.js.snap
@@ -22,5 +22,15 @@ exports[`renders demo correctly 1`] = `
+
`;