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>
