29.ElementUI省市区组件之element-china-area-data 使用

置顶

Arik~朽木

于 2024-08-28 21:52:54 发布

阅读量414

点赞数 5

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_43159673/article/details/141650765

版权

省市区三级联动

一、安装

注意：下载时可能因为网络问题异常
- element-china-area-data 6.1.0

# 此版本 6.1.0
npm install element-china-area-data -S

二、自定义组件

在src/component/ 创建组件 ChinaAreaSelect 组件
ChinaAreaSelect /index.vue 文件

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      filterable
      @change="handleChange"
    >
    </el-cascader>
  </div>
</template>

<script>
import {regionData, codeToText} from "element-china-area-data";

export default {
  name: "ChinaAreaSelect",
  props: ['areaStr'],
  data() {
    return {
      options: regionData,
      selectedOptions: []
    }
  },
  watch: {
    areaStr: {
      handler(newVal, oldVal) {
        console.log(newVal)
        if (newVal) {
          this.selectedOptions = newVal.split(',');
        }
      },
      immediate: true
    }
  },
  methods: {
    handleChange(value) {
      //console.log(value);
      let addressStr = '';
      //拼凑地址字符串
      if (value !== null) {
        value.forEach((item, index) => {
          if (index === (value.length - 1)) {
            addressStr += item