省市区3级联动公用组件,基于elCascader

这个没什么难点,就是找数据挺麻烦。我是直接拿的vant的数据。再通过一系列的js操作转换成了一个树结构的对象。选传一个zAreaObj,因为基于element的样式,所以这个对象里面基本都是他的原生属性。

此组件已上传至npm,可以直接安装使用

npm install ztc-vue

main.js引入

import ztcVue from 'ztc-vue'; //引入邹田聪的组件
import 'ztc-vue/lib/ztc-vue.css'; //引入邹田聪的组件样式
Vue.use(ztcVue);

页面直接使用


1、组件源码main.vue



2、json文件

点击去下载——main.json

3、测试使用



4、效果预览省市区3级联动公用组件,基于elCascader_第1张图片

你可能感兴趣的:(前端,Vue,Element,vue.js,elementui,前端)