Cascader 级联选择器

用于一组相关联的数据集合进行选择,例如省市区等。

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "Cascader",
  3. "usingComponents": {
  4. "wux-cell-group": "../../dist/cell-group/index",
  5. "wux-cell": "../../dist/cell/index",
  6. "wux-cascader": "../../dist/cascader/index"
  7. }
  8. }

示例

  1. <wux-cascader visible="{{ visible1 }}" default-value="{{ value1 }}" title="所在地区" options="{{ options1 }}" bind:close="onClose1" bind:change="onChange1" />
  2. <wux-cascader visible="{{ visible2 }}" controlled value="{{ value2 }}" title="所在地区" options="{{ options2 }}" bind:close="onClose2" bind:change="onChange2" bind:load="onLoadOptions" />
  3. <view class="page">
  4. <view class="page__hd">
  5. <view class="page__title">Cascader</view>
  6. <view class="page__desc">级联选择器</view>
  7. </view>
  8. <view class="page__bd">
  9. <wux-cell-group title="Cascader">
  10. <wux-cell title="Default" extra="{{ title1 }}" bind:click="onOpen1"></wux-cell>
  11. <wux-cell title="Async" extra="{{ title2 }}" bind:click="onOpen2"></wux-cell>
  12. </wux-cell-group>
  13. </view>
  14. </view>
  1. import data from './data'
  2. Page({
  3. data: {
  4. options1: data,
  5. value1: [],
  6. options2: [
  7. {
  8. value: 'beijing',
  9. label: '北京',
  10. isLeaf: false,
  11. },
  12. {
  13. value: 'hangzhou',
  14. label: '杭州',
  15. isLeaf: false,
  16. },
  17. ],
  18. value2: [],
  19. },
  20. onOpen1() {
  21. this.setData({ visible1: true })
  22. },
  23. onClose1() {
  24. this.setData({ visible1: false })
  25. },
  26. onChange1(e) {
  27. this.setData({ title1: e.detail.options.map((n) => n.label).join('/') })
  28. console.log('onChange1', e.detail)
  29. },
  30. onOpen2() {
  31. this.setData({ visible2: true })
  32. },
  33. onClose2() {
  34. this.setData({ visible2: false })
  35. },
  36. onChange2(e) {
  37. console.log('onChange2', e.detail)
  38. this.setData({ value2: e.detail.value, title2: e.detail.done && e.detail.options.map((n) => n.label).join('/') })
  39. },
  40. onLoadOptions(e) {
  41. console.log('onLoadOptions', e.detail)
  42. const { value } = e.detail
  43. const options2 = [...this.data.options2]
  44. wx.showLoading({ mask: true })
  45. setTimeout(() => {
  46. if (value[value.length - 1] === 'beijing') {
  47. options2.forEach((n) => {
  48. if (n.value === 'beijing') {
  49. n.children = [
  50. {
  51. value: 'baidu',
  52. label: '百度'
  53. },
  54. {
  55. value: 'sina',
  56. label: '新浪'
  57. },
  58. ]
  59. }
  60. })
  61. } else if (value[value.length - 1] === 'hangzhou') {
  62. options2.forEach((n) => {
  63. if (n.value === 'hangzhou') {
  64. n.children = [
  65. {
  66. value: 'ali',
  67. label: '阿里巴巴'
  68. },
  69. {
  70. value: '163',
  71. label: '网易'
  72. },
  73. ]
  74. }
  75. })
  76. }
  77. wx.hideLoading()
  78. this.setData({ value2: value, options2 })
  79. }, 1000)
  80. },
  81. })
  1. // 简单的数据格式如下
  2. [{
  3. 'label': '北京',
  4. 'value': '110000',
  5. 'children': [{
  6. 'label': '北京市',
  7. 'value': '110000',
  8. 'children': [{
  9. 'label': '东城区',
  10. 'value': '110101',
  11. }],
  12. }],
  13. }, {
  14. 'label': '上海',
  15. 'value': '310000',
  16. 'children': [{
  17. 'label': '上海市',
  18. 'value': '310000',
  19. 'children': [{
  20. 'label': '黄浦区',
  21. 'value': '310101',
  22. }]
  23. }],
  24. }]

视频演示

Cascader

API

Cascader props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-cascader
defaultValue array 默认值,当 controlledfalse 时才生效 []
value array 当前值,当 controlledtrue 时才生效 []
controlled boolean 是否受控 说明文档 false
title string 标题的文字 -
options array 可选项数据源 []
options[].value string 属性值 -
options[].label string 描述 -
options[].children array 子选项 []
options[].disabled boolean 是否禁用 false
options[].isLeaf boolean 是否叶子节点,用于动态加载选项 false
chooseTitle string 选择的标题文字 请选择
visible boolean 是否显示组件 false
defaultFieldNames object 自定义 options 中的 value、label、children 字段 { label: ‘label’, value: ‘value’, children: ‘children’ }
bind:change function 选择完成后的回调函数 -
bind:close function 隐藏浮层的回调函数 -
bind:load function 动态加载选项的回调函数 -

Cascader externalClasses

名称 描述
wux-class 根节点样式类
wux-scroll-view-class 滚动区域节点样式类