Cascader 多级地址级联选择 APP

该方法或组件支持移动端小程序调用

PC

该方法或组件支持桌面端小程序调用

<h3>使用方法</h3>
<Cascader ref="cascader" :options="options" v-model="selectedList" @onSelect="handleSelect" />
<h3>配合Actionsheet弹出层一起使用</h3>
<ok-button type="primary" @onClick="handleCustom">级联地址选择</ok-button>
<ActionSheet type="custom" :visible.sync="customShow" id="customActionSheet">
  <div slot="customContent" class="actionsheet-content">
    <p class="title">级联地址选择器组件示例</p>
    <Cascader :options="options" v-model="selectedList" @onSelect="handleSelect" />
  </div>
</ActionSheet>

const options = [
  {
    text: '广东省',
    value: '1000',
    children: [
      { text: '广州市', value: '1100', children: [
      { text: '天河区', value: '1110', children: [
      { text: '石牌街道', value: '1111', children: [
        { text: '天鹅花园小区', value: '11111' },
        { text: '云顶天宫小区', value: '11112' },
      ]},
      { text: '上舍街道', value: '1112' },
      { text: '车陂街道', value: '1113' },
      { text: '天河公园街道', value: '1114' },
      { text: '体育中心街道', value: '1115' },
      ]},
      { text: '番禺区', value: '1120' },
      { text: '越秀区', value: '1130' },
      { text: '海珠区', value: '1140' },
      { text: '白云区', value: '1150' },
      ]},
      { text: '中山市', value: '1200' },
      { text: '佛山市', value: '1300' },
      { text: '珠海市', value: '1400' },
      { text: '深圳市', value: '1500' }
    ],
  }
];
export default {
  data () {
    return {
      options,
      customShow: false,
      selectedList: [],
      activeIndex: 0
    }
  },
  watch: {
    selectedList (val) {
      console.log(val)
    }
  },
  methods: {
    handleCustom () {
      this.customShow = true
    },
    handleSelect (option) {
      // 异步添加子级示例
      if (option.text === '深圳市'){
        setTimeout(() => {
          let children = [
            { text: '宝山区', value: '1510' },
            { text: '福田区', value: '1520' }
          ];
          this.options[0].children[4].children = children;
          option.children = children;
          this.$refs.cascader.update(option);
        }, 500);
      }
    }
  }
}