解决vue-area-linkage 无法回显的bug

48 阅读 0 评论 32 点赞

我是靠谱客的博主顺利期待，最近开发中收集的这篇文章主要介绍解决vue-area-linkage 无法回显的bug，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、写在前面

最近写的项目,前几天有一个需求是要写省市区联动选择，我们项目组的一个妹子上网搜罗了一遍之后发现了vue-area-linkage这个插件，应该是专门为vue准备的省市区插件。

但是后面发现这插件有个数据无法回显的bug.

在这里插入图片描述

二、内容部分

将源码下载到本地跑了一遍,发现两个地方的代码没执行,导致默认值无法显示,就无法回显了.

下面两段代码是已经修改过后的,

1.移除 if (!this.isSetDefault && isArray(val) && val.length === this.level + 2) 此判断条件中的取反!.

 watch: {
        value (val) {
            if (this.isSetDefault && isArray(val) && val.length === this.level + 2) {
                this.beforeSetDefault();
                this.setDefaultValue();
            }

            if (!this.isSetDefault && isArray(val) && val.length && val.length !== this.level + 2) {
                assert(false, `设置的默认值和 level 值不匹配`);
            }
        },
 }

在这里插入图片描述

2.setDefaultsCodes () 方法中的第一段判断条件即可.

  setDefaultsCodes () {
            //这段代码有bug，默认值设置无法更新
            // if (this.isSetDefault) {
            //     return;
            // }
            this.isSetDefault = true;

            let codes = [];
            switch (this.level) {
                case 0:
                    codes = [this.curProvinceCode, this.curCityCode];
                    break;
                case 1:
                    codes = [this.curProvinceCode, this.curCityCode, this.curAreaCode];
                    break;
                case 2:
                    codes = [this.curProvinceCode, this.curCityCode, this.curAreaCode, this.curStreetCode];
                    break;
            }
            this.defaultsAreaCodes = [].concat(codes);
        }