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