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 @@