diff --git a/src/picker/README.md b/src/picker/README.md index aaaf41fff..e3cd9e291 100644 --- a/src/picker/README.md +++ b/src/picker/README.md @@ -159,7 +159,7 @@ export default { }; ``` -### Multi columns +### Set Column Values ```html @@ -175,15 +175,8 @@ export default { data() { return { columns: [ - { - values: Object.keys(states), - className: 'column1' - }, - { - values: states.Group1, - className: 'column2', - defaultIndex: 2 - } + { values: Object.keys(states) }, + { values: states.Group1 } ] }; }, @@ -200,7 +193,24 @@ export default { When Picker columns data is acquired asynchronously, use `loading` prop to show loading prompt ```html - + +``` + +```js +export default { + data() { + return { + columns: [], + loading: true + }; + }, + created() { + setTimeout(() => { + this.loading = false; + this.columns = ['Option']; + }, 1000); + } +}; ``` ### With Popup diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md index c719f9755..0cb7857a3 100644 --- a/src/picker/README.zh-CN.md +++ b/src/picker/README.zh-CN.md @@ -169,7 +169,9 @@ export default { }; ``` -### 多列联动 +### 动态设置选项 + +通过 Picker 上的实例方法可以更灵活地控制选择器,比如使用`setColumnValues`方法实现多列联动 ```html @@ -184,14 +186,10 @@ const citys = { export default { data() { return { - columns: [{ - values: Object.keys(citys), - className: 'column1' - }, { - values: citys['浙江'], - className: 'column2', - defaultIndex: 2 - }] + columns: [ + { values: Object.keys(citys) }, + { values: citys['浙江'] } + ] }; }, methods: { @@ -207,7 +205,24 @@ export default { 若选择器数据是异步获取的,可以通过 `loading` 属性显示加载提示 ```html - + +``` + +```js +export default { + data() { + return { + columns: [], + loading: true + }; + }, + created() { + setTimeout(() => { + this.loading = false; + this.columns = ['选项']; + }, 1000); + } +}; ``` ### 搭配弹出层使用 diff --git a/src/picker/demo/index.vue b/src/picker/demo/index.vue index 6bfe5d44a..6ce83aa1e 100644 --- a/src/picker/demo/index.vue +++ b/src/picker/demo/index.vue @@ -46,7 +46,7 @@ - + @@ -82,7 +82,6 @@ export default { i18n: { 'zh-CN': { city: '城市', - title4: '多列联动', cascade: '级联选择', withPopup: '搭配弹出层使用', chooseCity: '选择城市', @@ -92,6 +91,7 @@ export default { disableOption: '禁用选项', cascadeColumns: cascadeColumns['zh-CN'], multipleColumns: '多列选择', + setColumnValues: '动态设置选项', textColumns: ['杭州', '宁波', '温州', '嘉兴', '湖州'], disabledColumns: [ { text: '杭州', disabled: true }, @@ -106,7 +106,6 @@ export default { }, 'en-US': { city: 'City', - title4: 'Multi Columns', cascade: 'Cascade', withPopup: 'With Popup', chooseCity: 'Choose City', @@ -116,6 +115,7 @@ export default { disableOption: 'Disable Option', cascadeColumns: cascadeColumns['en-US'], multipleColumns: 'Multiple Columns', + setColumnValues: 'Set Column Values', textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'], disabledColumns: [ { text: 'Delaware', disabled: true },