Comparing to `Picker`, the required structure of props data is different for `CascadePicker`. The data structure of `Picker` is a two-dimensional array, and each column corresponds to an array. As in `CascadePicker`, there is a tree, that each item of first column has a `children` property which contains the counterpart data of following columns. Here is an example.
Comparing to `Picker`, the required structure of props data is different for `CascadePicker`. The data structure of `Picker` is a two-dimensional array, and each column corresponds to an array. As in `CascadePicker`, there is a tree, that each item of first column has a `children` property which contains the corresponding data of following columns. Here is an example.
When first column is on `Fruit`, the options of second column are `Apple` and `Orange`. And so on, when second column is on `Orange`, the options of third column are `Three` and `Four`.
When the first column goes to `Fruit`, the data of second column are `Apple` and `Orange`. And when the second column goes to on `Orange`, the data of third column are `Three` and `Four`.
- Province-city-area Picker
- Province-city-area Picker
...
@@ -110,7 +110,7 @@
...
@@ -110,7 +110,7 @@
- Date Picker
- Date Picker
It's same to date picker. Just construct the cascading data. Besides, we have written a [DatePicker component in example](https://github.com/didi/cube-ui/blob/dev/example/components/date-picker.vue), which could help you constructing the cascading data with start date and end date.
As same as province-city-area picker, you just need to construct the cascading data. Besides, we have written a [DatePicker component in example](https://github.com/didi/cube-ui/blob/dev/example/components/date-picker.vue), which could help you constructing the cascading data with start date and end date.
One more thing, although `setData` is available when visible. But considering user experience, it is demand to maintain the number of column unchanging when the picker is visible.
One more thing, although `setData` is available when visible. But considering user experience, you can't change the number of column when the picker is visible.
### Props configuration
### Props configuration
...
@@ -183,7 +183,7 @@
...
@@ -183,7 +183,7 @@
| - | - | - | - | - |
| - | - | - | - | - |
| title | title | String | '' | - |
| title | title | String | '' | - |
| data | the cascading data used to init option items | Array | [] | - |
| data | the cascading data used to init option items | Array | [] | - |
| selectIndex | the index of the selected item, corresponding content will be displayed when picker shows | Array | [] | [1] |
| selectedIndex | the index of the selected item, corresponding content will be displayed when picker shows | Array | [] | [1] |
By monitoring the `change` event triggered by each roller and invoke `setData` method to dynamicly set values of associated rollers to accomplish linkage selectors.
- Instance method `setData`
- Instance method `setData`
```html
```html
...
@@ -202,50 +132,6 @@
...
@@ -202,50 +132,6 @@
```
```
Instance method `setData` accepts two parameters, both of whom are arrays. The first is data that the roller displays and the second is indexs of selected values.
Instance method `setData` accepts two parameters, both of whom are arrays. The first is data that the roller displays and the second is indexs of selected values.
- Extended component: Date Picker
Besides use directly, we could extend many common pickers based on the raw Picker, such as Date Picker and Time Picker. As for Extended pickers, the method of API calling is also recommended. Take Date Picker as an example, We wrote a post-packaging Date Picker component ([source code](https://github.com/didi/cube-ui/blob/dev/example/components/date-picker.vue)) at first. And after `createAPI` for this component, it could be used as following.