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`] = ` +
+
+
地区
+
+
+
+ +
+ +
`;