Cascader 级联选择

级联选择框。

何时使用

• 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
• 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
• 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。

代码演示

基本

省市区级联。

<template>
  <v-cascader :data="options" @change="onchange"></v-cascader>
</template>
<script>
  export default {
    data: ()=> ({
      options: [{
          value: 'sc',
          label: '四川',
          children: [{
              value: 'cd',
              label: '成都',
              children: [{
                  value: 'jyq',
                  label: '九眼桥'
              }, {
                  value: 'cxl',
                  label: '春熙路'
              }],
          }, {
              value: 'nc',
              label: '南充',
              children: [{
                  value: 'nbx',
                  label: '南部县'
              }]
          }],
      }, {
          value: 'cq',
          label: '重庆',
          children: [{
              value: 'lp',
              label: '梁平',
              children: [{
                  value: 'sgt',
                  label: '双桂堂'
              }],
          }],
      }]
    }),
    methods: {
      onchange(val) {
        console.log(val)
      }
    }
  };
</script>

大小

不同大小的级联选择器。

<template>
  <v-cascader size="large" :data="options"></v-cascader>
  <v-cascader :data="options"></v-cascader>
  <v-cascader size="small" :data="options"></v-cascader>
</template>
<script>
  export default {
    data: ()=> ({
      options: [{
          value: 'sc',
          label: '四川',
          children: [{
              value: 'cd',
              label: '成都',
              children: [{
                  value: 'jyq',
                  label: '九眼桥'
              }, {
                  value: 'cxl',
                  label: '春熙路'
              }],
          }, {
              value: 'nc',
              label: '南充',
              children: [{
                  value: 'nbx',
                  label: '南部县'
              }]
          }],
      }, {
          value: 'cq',
          label: '重庆',
          children: [{
              value: 'lp',
              label: '梁平',
              children: [{
                  value: 'sgt',
                  label: '双桂堂'
              }],
          }],
      }]
    })
  };
</script>

默认值

默认值通过数组的方式指定。不同大小的级联选择器。

<template>
  <v-cascader v-model="value" :data="options"></v-cascader>
</template>
<script>
  export default {
    data: ()=> ({
      value: ['cq','lp','sgt'],
      options: [{
          value: 'sc',
          label: '四川',
          children: [{
              value: 'cd',
              label: '成都',
              children: [{
                  value: 'jyq',
                  label: '九眼桥'
              }, {
                  value: 'cxl',
                  label: '春熙路'
              }],
          }, {
              value: 'nc',
              label: '南充',
              children: [{
                  value: 'nbx',
                  label: '南部县'
              }]
          }],
      }, {
          value: 'cq',
          label: '重庆',
          children: [{
              value: 'lp',
              label: '梁平',
              children: [{
                  value: 'sgt',
                  label: '双桂堂'
              }],
          }],
      }]
    }),
    watch: {
      value(val){
        console.log(val)
      }
    }
  };
</script>

禁用选项

通过指定options里的disabled字段。

<template>
  <v-cascader :data="options2"></v-cascader>
</template>
<script>
  export default {
    data: ()=> ({
      options2: [{
        value: 'sc',
        label: '四川',
        disabled: 'true',
        children: [{
          value: 'cd',
          label: '成都',
          children: [{
            value: 'jyq',
            label: '九眼桥'
          },{
            value: 'cxl',
            label: '春熙路'
          }],
        },{
          value: 'nc',
          label: '南充',
          children: [{
            value: 'nbx',
            label: '南部县'
          }]
        }],
        }, {
        value: 'cq',
        label: '重庆',
        children: [{
          value: 'lp',
          label: '梁平',
          children: [{
            value: 'sgt',
            label: '双桂堂'
          }],
        }],
      }]
    })
  };
</script>

禁用

禁用整个控件

  <v-cascader disabled></v-cascader>

API

Cascader Props

Cascader Events