https://www.antdv.com/components/cascader-cn/

ant design 中很简便的一个三级联动  

记得先安装Ant design 哦

现在从 yarn 或 npm 安装并引入 ant-design-vue。

$yarnaddant-design-vue

修改 src/main.js，引入 antd 的按钮组件以及全部样式文件。

importVuefrom'vue';importButtonfrom'ant-design-vue/lib/button';import'ant-design-vue/dist/antd.css';importAppfrom'./App';Vue.component(Button.name,Button);Vue.config.productionTip=false;newVue({render:h=>h(App),}).$mount('#app');

修改 src/App.vue的 template 内容。

<template>  <divid="app">    <imgsrc="./assets/logo.png">    <a-buttontype="primary">Button></a-button>  </div></template>...

<template> <a-cascader:options="options"placeholder="Please select"@change="onChange"/></template><script>exportdefault{data(){return{options:[{value:'zhejiang',label:'Zhejiang',children:[{value:'hangzhou',label:'Hangzhou',children:[{value:'xihu',label:'West Lake',},],},],},{value:'jiangsu',label:'Jiangsu',children:[{value:'nanjing',label:'Nanjing',children:[{value:'zhonghuamen',label:'Zhong Hua Men',},],},],},],};},methods:{onChange(value){console.log(value);},},};</script>