vue-element省市联动组件使用方法,以及如何单独选择某一级,如只选择省,或者只选择市

先上代码

<template>
<el-cascader
   ref="cascader"
   size="large"
   change-on-select
   :options="options"
   v-model="searea"
   @change="handleChange"
 >
 </el-cascader>
 </template>
 <script>
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
export default {
  components: {
    tree,
    Searchname
  },
  data() {
    return {
      options: regionData,
      searea: "",
    };
  },
  methods: {
    //城市选择
    handleChange(e) {
    console.log(e)
    //直接输出数组
   	//可以转换为对应的城市编码TextToCode,或将城市转换为名称CodeToText
   	
    },
  },
  mounted() {
    //城市选择配置
    setInterval(function() {
      document.querySelectorAll(".el-cascader-node__label").forEach(el => {
        el.onclick = function() {
          if (this.previousElementSibling) this.previousElementSibling.click();
        };
      });
    }, 1000);
  }
};
</script>

1,安装省市区插件

npm install element-china-area-data -S
//引用
import { regionData, CodeToText, TextToCode } from "element-china-area-data";

2,省市区插件介绍
provinceAndCityData是省市二级联动数据(不带“全部”选项)
regionData是省市区三级联动数据(不带“全部”选项)
provinceAndCityDataPlus是省市区三级联动数据(带“全部”选项)
regionDataPlus是省市区三级联动数据(带“全部”选项)
“全部"选项绑定的value是空字符串”"
CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText[‘110000’]输出北京市
TextToCode是个大对象,属性是汉字,属性值是区域码 用法例如:TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105
需要什么方法或值,就在引用时加入进去
3,正常情况需要选到最后一级才行,增加上文(城市选择配置)的代码,可实现单独选择某一级,例如只选择省,或者只选择市

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值