Ant Design Vue Cascader 级联省市区选择组件的基础用法

Ant Design Vue Cascader 级联省市区选择组件的基础用法包括样式大小、默认值、禁用选项、自定义图标。

基础用法

<template>
  <a-cascader :options="options" @change="onChange" placeholder="Please select" />
</template>
<script>
  export default {
    data() {
      return {
        options: [
          {
            value: 'zhejiang',
            label: '浙江省',
            children: [
              {
                value: 'hangzhou',
                label: '杭州市',
                children: [
                  {
                    value: 'xihu',
                    label: '西湖区',
                  },
                ],
              },
            ],
          },
          {
            value: 'shanghai',
            label: '上海市',
            disabled: true, //禁用选择
            children: [
              {
                value: 'qingpuqu',
                label: '青浦区',
                children: [
                  {
                    value: 'beijinglu',
                    label: '北京路',
                  },
                ],
              },
            ],
          },
        ],
      };
    },
    methods: {
      onChange(value) {
        console.log(value);
      },
    },
  };
</script>

例子

其他设置

//defaultValue属性设置默认值
//style设置样式
//placeholder 提示文字
//expandTrigger="hover" 鼠标移入展开下级
//changeOnSelect 允许选择父级或者子级

//webpack node.js方式
<a-locale-provider :locale="locales.zh_CN">
     <a-cascader :options="options" @change="onChange" 
      :defaultValue="['zhejiang', 'hangzhou', 'xihu']"
    style="width: 100%" placeholder="请选择" expandTrigger="hover"   changeOnSelect/>
</a-locale-provider>
//浏览器方式
  <a-locale-provider :locale="locales.zh_CN">
<a-cascader :options="options" @change="onChange" placeholder="请选择省市区"  
:default-value="['zhejiang', 'hangzhou', 'xihu']"
    style="width: 340px"  expand-trigger="hover" change-on-select >
  </a-cascader>