Cascader 级联选择器

基本用法

<div class="cascader-demo">
  <se-cascader
    :options="options"
    size="mini"
    @change="onChange"
    :value="selected"
    change-on-select
  ></se-cascader>
  <se-cascader :options="options" @change="onChange"></se-cascader>
  <se-cascader :options="options" size="large" @change="onChange"></se-cascader>
</div>
<script>
  export default {
    data() {
      return {
        options: [
          {
            label: '藻类',
            value: 'zaolei',
            children: [{ label: '绿藻', value: 'lvzao' }, { label: '轮藻', value: 'lunzao' }]
          },
          {
            label: '苔藓',
            value: 'taixian',
            disabled: true,
            children: [
              { label: '地钱', value: 'diqian' },
              { label: '角苔', value: 'jiaotai' },
              { label: '苔藓植物门', value: 'taixianzhiwumeng' }
            ]
          },
          {
            label: '蕨类',
            value: 'juelei',
            children: [
              { label: '石松', value: 'shisong' },
              { label: '蕨类植物门', value: 'jueleizhiwumeng' }
            ]
          },
          {
            label: '种子植物',
            value: 'zhongzizhiwu',
            children: [
              {
                label: '被子',
                value: 'pizi',
                children: [
                  { label: '睡莲目', value: 'shuilianmu' },
                  { label: '木兰藤目', value: 'mulantengmu' }
                ]
              },
              { label: '苏铁', value: 'sutie' },
              { label: '银杏', value: 'yinxin' },
              { label: '松柏', value: 'songbai' }
            ]
          }
        ],
        selected: ['zaolei', 'lvzao']
      }
    },
    methods: {
      onChange(value) {
        console.log(value)
      }
    }
  }
</script>
<style>
  .cascader-demo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 700px;
  }
</style>

内置的省市区选择器

<se-cascader show-city @change="onChange" :value="selected"></se-cascader>

<script>
  export default {
    data() {
      return {
        selected: ['北京市', '朝阳区']
      }
    },
    methods: {
      onChange(value) {
        console.log(value)
      }
    }
  }
</script>

Props

Events