VueAreaLinkage 设置默认值Label不更新修改办法

最新推荐文章于 2023-06-13 21:46:53 发布

11wy11

最新推荐文章于 2023-06-13 21:46:53 发布

阅读量991

点赞数

分类专栏：前端文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weiyuan_player/article/details/105169748

版权

本文介绍了VueAreaLinkage组件在设置默认值后Label不更新的问题及解决方案。通过修改area-cascader组件的源码，包括调整getActiveLabels函数和SetDefaultValue函数，成功解决了动态设置selected数组时Label未能及时更新的问题。文中还提供了项目中具体的使用实例和代码片段。

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

VueAreaLinkage 设置默认值无效修改办法

关于使用VueAreaLinkage，自定义数据，动态设置绑定的数组后，行政区划组件上的label不发生变化的解决办法。

组件基本介绍及使用场景

vueAreaLinkage

VueAreaLinkage安装使用

5.0版本之后，可以通过npm install vue-area-linkage --save和npm install area-data --save安装依赖，在main.js种引入

import VueAreaLinkage from 'vue-area-linkage';
import 'vue-area-linkage/dist/index.css'
 Vue.use(VueAreaLinkage)
    在页面组件内
import {
    pca, pcaa } from 'area-data'; // 城市数据
    
   // 在data中定义数据：
selected: [],
pca: pca,
 pcaa: pcaa

下面主要介绍之前版本直接将源代码引入项目中并根据需要修改代码，符合自己的应用场景。

使用场景

实现市，县，乡三级联动，并通过点击地图区域，动态设置行政区划选择默认值。未修改的代码使用是，第一次设置默认值是生效的，之后通过修改绑定的selected数组，无法改变行政区划选择器上的label显示，下面主要介绍如何通过修改组件源码，实现设置默认值，行政区划自动更新。

自定义的region数据结构如下：
在这里插入图片描述

VueAreaLinkage修改绑定Label不更新解决方案

以area-cascader组件为例

根据自己的region数据，修改area-cascader中index.vue中的getActiveLabels函数，将获取provinces的Key设置为自己的，以贵阳市为例，修改源代码中的86为52.area-select组件做类似处理

修改area-cascader>index.vue,修改SetDefaultValue函数，源代码中setDefaultValue只动态设置provinceCode和province，但因为业务需求只有一个市，所以动态设置selected数组时，label不及时更新，因为不会激活设置SetDefaultCode函数，因此，这里首先需要修改动态添加默认值所选中的县和乡。修改代码如下：

setDefaultValue() {
     
      let provinceCode = "";
      let cityCode = "";
      let areaCode = "";
      if (this.isCode) {
     
        provinceCode = this.defaults[0];
        cityCode = this.defaults[1];
        areaCode = this.defaults[2];
        this.curCityCode = cityCode;
        this.curAreaCode = areaCode;
      } else {
     
        const province = find(
          this.provinces,
          item => item === this.defaults[0]
        );
        assert(province, `城市 ${
       this.defaults[0]} 不存在`