<template>
    <div class="ht-base-cascader-custom-demo">
        {{ text }}
        <ht-base-cascader :data="data" @on-change="handleChange">
            <a href="javascript:void(0)">选择</a>
        </ht-base-cascader>
    </div>
</template>

<script>
  export default {
    name: 'HtBaseCascaderCustomDemo',
      data () {
          return {
              text: '未选择',
              data: [{
                  value: 'beijing',
                  label: '北京',
                  children: [
                      {
                          value: 'dongchengqu',
                          label: '东城区'
                      },
                      {
                          value: 'xichengqu',
                          label: '西城区'
                      }
                  ]
              },{
                  value: 'shanghai',
                  label: '上海',
                  disabled: true,
                  children: [
                      {
                          value: 'baoshanqu',
                          label: '宝山区'
                      }
                  ]
              }, {
                  value: 'guangdong',
                  label: '广东',
                  children: [
                      {
                          value: 'guangzhoushi',
                          label: '广州市',
                          children: [
                              {
                                  value: 'tianhequ',
                                  label: '天河区'

                              }, {
                                  value: 'fanyuqu',
                                  label: '番禺区',
                                  children: [
                                      {
                                          value: 'nanchunzhen',
                                          label: '南村镇',
                                      },{
                                          value: 'shawanzhen',
                                          label: '沙湾镇'
                                      }
                                  ]
                              }
                          ]
                      }
                  ],
              }]
          }
      },
      methods: {
          handleChange (value, selectedData) {
              this.text = selectedData.map(o => o.label).join(', ');
          }
      }
  }
</script>
<style>
    .ht-base-cascader-custom-demo {

    }
</style>

