选择器 StackPicker & StackSelect

基本

  1. <za-cell title="单列">
  2.   <za-button slot="description" size="xs" @click="visible1 = true">开启</za-button>
  3. </za-cell>
  5. <za-stack-picker :visible.sync="visible1" title="级联选择" placeholder="请选择" :data-source="District" :display-render="selected => selected.map(item => item.label).join('-')" @ok="handleOk" @change="handleChange" @cancel="handleCancel">

层叠式选择器 StackSelect

  1. <za-cell title="级联选择">
  2.   <za-stack-select v-model="v1" title="级联选择" placeholder="请选择" :data-source="District" :display-render="selected => selected.map(item => item.label).join('-')" @ok="handleOk" @change="handleChange" @cancel="handleCancel">
  3. </za-stack-select></za-cell>

Vue Script

  1. <script name="vue">
  2. const District = [{
  3.   "value": "340000",
  4.   "label": "安徽省",
  5.   "children": [{
  6.     "value": "340800",
  7.     "label": "安庆市",
  8.     "children": [{
  9.       "value": "340803",
  10.       "label": "大观区",
  11.       "children": []
  12.     }, {
  13.       "value": "340822",
  14.       "label": "怀宁县",
  15.       "children": []
  16.     }, {
  17.       "value": "340882",
  18.       "label": "其它区",
  19.       "children": []
  20.     }]
  21.   }]
  22. },{
  23.   "value": "310000",
  24.   "label": "上海",
  25.   "children": [{
  26.     "value": "310100",
  27.     "label": "上海市",
  28.     "children": [{
  29.       "value": "310113",
  30.       "label": "宝山区",
  31.       "children": []
  32.     }, {
  33.       "value": "310105",
  34.       "label": "长宁区",
  35.       "children": []
  36.     }, {
  37.       "value": "310230",
  38.       "label": "崇明县",
  39.       "children": []
  40.     }, {
  41.       "value": "310152",
  42.       "label": "川沙区",
  43.       "children": []
  44.     }]
  45.   }]
  46. }];
  47. export default {
  48.   data() {
  49.     return {
  50.       visible1: false,
  51.       v1: [],
  52.       District,
  53.     }
  54.   },
  55.   methods: {
  56.     handleOk(v) {
  57.       console.log('it may still scrolling when ok is clicked. so ues v-model or @change instead')
  58.       console.log(v);
  59.     },
  60.     handleChange(v) {
  61.       console.log(v);
  62.     },
  63.     handleCancel(event) {
  64.       console.log('cancelled');
  65.     },
  66.   },
  67. };
  68. </script>

API

Attributes

属性类型默认值可选值／参数说明
data-sourcearray[ ]数据源
default-valuearray, string初始值
value-memberstring'value'值字段对应的 key
disabledbooleanfalse是否禁用
item-renderfunctionnoop滚轮区域选项址值渲染
colsnumber级联选择器的级数

StackPicker & StackSelect Attributes

属性类型默认值可选值／参数说明
titlestring'请选择'选择器标题
v-modelarray, string绑定值
placeholderstring'请选择'输入提示信息
okTextstring'确定'输入提示信息
cancel-textstring'取消'输入提示信息
display-renderfunction所选值的展示
visiblebooleanfalse是否显示, 支持.sync 修饰符 (v2.3.0+)

StackPicker & StackSelect Events

事件名称说明回调参数
ok点击确定时触发的回调函数选中值的对象列表
cancel点击取消时触发的回调函数event 对象
change滚动时值变化时触发的回调函数选中值的对象列表

StackPicker 层叠选择器 - 图1