diff --git a/src/picker/README.md b/src/picker/README.md
index be6ca3383..aaaf41fff 100644
--- a/src/picker/README.md
+++ b/src/picker/README.md
@@ -80,6 +80,31 @@ export default {
};
```
+### Multiple Columns
+
+```html
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ columns: [
+ {
+ values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'],
+ defaultIndex: 2
+ },
+ {
+ values: ['Morging', 'Afternoon', 'Evening'],
+ defaultIndex: 1
+ }
+ ]
+ };
+ }
+};
+```
+
### Cascade
```html
@@ -261,6 +286,7 @@ Picker events will pass different parameters according to the columns are single
| values | Value of column | *string[]* |
| defaultIndex | Default value index | *number* |
| className | ClassName for this column | *any* |
+| children | Cascade children | *Column* |
### Methods
diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md
index e2a8b624c..c719f9755 100644
--- a/src/picker/README.zh-CN.md
+++ b/src/picker/README.zh-CN.md
@@ -82,6 +82,35 @@ export default {
};
```
+### 多列选择
+
+通过`columns`属性可以配置多列选择
+
+```html
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ columns: [
+ // 第一列
+ {
+ values: ['周一', '周二', '周三', '周四', '周五'],
+ defaultIndex: 2
+ },
+ // 第二列
+ {
+ values: ['上午', '下午', '晚上'],
+ defaultIndex: 1
+ }
+ ]
+ };
+ }
+};
+```
+
### 级联选择
使用`columns`的`children`字段可以实现选项级联的效果(从 2.4.5 版本开始支持)
@@ -155,17 +184,14 @@ const citys = {
export default {
data() {
return {
- columns: [
- {
- values: Object.keys(citys),
- className: 'column1'
- },
- {
- values: citys['浙江'],
- className: 'column2',
- defaultIndex: 2
- }
- ]
+ columns: [{
+ values: Object.keys(citys),
+ className: 'column1'
+ }, {
+ values: citys['浙江'],
+ className: 'column2',
+ defaultIndex: 2
+ }]
};
},
methods: {
@@ -273,6 +299,7 @@ Picker 组件的事件会根据 columns 是单列或多列返回不同的参数
| values | 列中对应的备选值 | *string[]*
| defaultIndex | 初始选中项的索引,默认为 0 | *number* |
| className | 为对应列添加额外的类名 | *any* |
+| children | 级联选项 | *Column* |
### 方法
diff --git a/src/picker/demo/data.js b/src/picker/demo/data.ts
similarity index 73%
rename from src/picker/demo/data.js
rename to src/picker/demo/data.ts
index e04a88b0f..8a6525b28 100644
--- a/src/picker/demo/data.js
+++ b/src/picker/demo/data.ts
@@ -1,3 +1,26 @@
+export const dateColumns = {
+ 'zh-CN': [
+ {
+ values: ['周一', '周二', '周三', '周四', '周五'],
+ defaultIndex: 2,
+ },
+ {
+ values: ['上午', '下午', '晚上'],
+ defaultIndex: 1,
+ },
+ ],
+ 'en-US': [
+ {
+ values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'],
+ defaultIndex: 2,
+ },
+ {
+ values: ['Morging', 'Afternoon', 'Evening'],
+ defaultIndex: 1,
+ },
+ ],
+};
+
export const cascadeColumns = {
'zh-CN': [
{
diff --git a/src/picker/demo/index.vue b/src/picker/demo/index.vue
index 06bc9de93..6bfe5d44a 100644
--- a/src/picker/demo/index.vue
+++ b/src/picker/demo/index.vue
@@ -1,12 +1,12 @@
-
+
@@ -16,7 +16,17 @@
+
+
+
+
@@ -33,7 +43,7 @@
-
+
@@ -56,7 +66,7 @@
@@ -66,7 +76,7 @@