Vue的省份联动

最新推荐文章于 2024-07-17 11:22:08 发布

就叫飞六吧

最新推荐文章于 2024-07-17 11:22:08 发布

阅读量532

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_52236586/article/details/138413574

版权

本文介绍了如何在Vue项目中使用ElementUI组件库实现省份联动选择器，包括安装依赖、数据绑定和处理用户选择，以及如何根据地址字符串填充选择器。

摘要由CSDN通过智能技术生成

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>

效果图
在这里插入图片描述