Vue的省份联动

Vue的省份联动

一、安装依赖库

复制代码
npm install element-china-area-data -S




npm install element-ui --save

全局使用elemntui组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

二 、代码如下

复制代码
<template>
  <div>
    <el-cascader size="large" :options="options" v-model="provinces" @change="handleChange" placeholder="请选择省市区"></el-cascader>
    <div>所选省市区: {{ selectedRegion }}</div>
    <el-button type="primary" @click="fillInAddress">回填地址</el-button>
  </div>
</template>

<script>
import { regionData } from "element-china-area-data"; // 引入

export default {
  data() {
    return {
      options: regionData,
      provinces: [],
      selectedRegion: '' // 用于显示选中的省市区中文
    };
  },

  methods: {
    handleChange(value) {
      const text = this.findTextByValue(value); // 调用方法查找选中的省市区的中文文本
      this.selectedRegion = text;
    },

    // 根据选中的省市区代码查找对应的中文文本
    findTextByValue(value) {
      let text = '';
      let data = regionData;
      for (let i = 0; i < value.length; i++) {
        const val = value[i];
        const item = data.find(item => item.value === val);
        if (item) {
          text += item.label;
          if (i !== value.length - 1) {
            text += ' / ';
            data = item.children || [];
          }
        }
      }
      return text;
    },

    // 将从数据库查询出来的地址回填到省份联动选择器中
    fillInAddress() {
      // 假设从数据库查询出来的地址是一个包含省、市、区的地址字符串
      const address = "广东省 深圳市 南山区";
      const addressArray = address.split(' ');
      const valueArray = [];
      let tempOptions = regionData;
      for (let i = 0; i < addressArray.length; i++) {
        const addressItem = addressArray[i];
        const item = tempOptions.find(item => item.label === addressItem);
        if (item) {
          valueArray.push(item.value);
          tempOptions = item.children || [];
        }
      }
      this.provinces = valueArray;
    }
  }
};
</script>

效果图

相关推荐
中微子4 分钟前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 分钟前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路1 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_1 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD2 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding2 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js