【Vue】使用ElementUI组件基于element-china-area-data库实现省市区三级联动的组件封装
效果展示
依赖包版本
"element-china-area-data": "^6.1.0", "element-ui": "2.15.6",
组件代码
// components/chinaAreaCascader/index.vue import { provinceAndCityData,regionData,pcTextArr,pcaTextArr, codeToText} from 'element-china-area-data' export default { name: 'chinaAreaCascader', props:{ value:{ //双向绑定的值 type:Array, default:()=>{ return [] } }, // 选项类型 type:{ type:String, default:'regionData' //默认省市区三级联动 } }, data(){ return { // 选项 options:{ provinceAndCityData, //provinceAndCityData省市二级联动 汉字+code regionData, //regionData省市区三级联动 汉字+code pcTextArr, //pcTextArr省市联动数据,纯汉字 pcaTextArr, //pcaTextArr省市区联动数据,纯汉字 codeToText, //codeToText是个大对象,属性是区域码,属性值是汉字 用法例如:codeToText[‘110000’]输出北京市 }, val:[] //当前组件的值 } }, watch:{ value:{ handler(newVal) { this.val = newVal //绑定外部组件传入的默认值 }, deep:true } }, methods:{ // 双向绑定 handleChange(){ console.log(this.val,'当前选择') this.$emit('input',this.val) //触发input事件,将当前组件的值传给外部组件 } } }
使用组件
import ChinaAreaCascader from '@/components/chinaAreaCascader/index.vue' export default { components: { ChinaAreaCascader }, data() { formData:{ position:[], //省市区位置 } } }
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。