在vue开发中遇到的一个小bug，el-select数据视图不统一。

一、项目需求

在一个项目需求中，我们很多时候需要进行地区的三级联动选择，这个相信很多人都不陌生，也就不过多介绍了，但是在有的时候，我们需要进行等级选择
1、等级选省级择只能选择省级菜单，市级和县级隐藏，
2、选择市级，那么只隐藏县级菜单，
3、选择县级都不隐藏
如：

二、可能产生的bug

在选择的时候，我们有可能选择县级，区域全部选择完成，但突然又改为市级，那么这个时候就要重置数据，如不重置，上传时会把已经隐藏的县级code也一起传给后台，造成bug

三、如何解决

解决当然很简单，就是在每一次区域选择的时候重置一线省市区的数据，如下图

四、衍生bug

其中changeHosform是编辑新增中的数据，也就是遇到bug的地方，如上图中的最后注释的一项，如果我重置了区级的数据，会造成视图数据不统一的bug，也就是选择了区级项，页面上无显示，但是数据却有了，再在之后的输入框中填入数据，区级的视图又出来了

这里已经选好了最后的区级项目，但是无显示

这里在下面的输入框中输入数据

在我苦思无果之后求助了论坛，当然答案也是五花八门

五、论坛给出的可能

1、打开弹窗或者选择每级下拉的时候，未重置后面的数据

切换等级的代码里面只是写了清空下拉选中的值，并没有写重置下拉选项的数据。
等级数组 下拉选项array 等级值
子级1 下拉选项array 子级1值
子级2 下拉选项array 子级2值
子级3下拉选项array 子级3值

等级切换重置3个子级数组及选择的值
子级1切换重置子级2和3 数组及值
子级2切换重置子级3 数组及值
相当于是4级联动

2、数据类型不统一

那就只能是你的数据类型不统一了, dom上的值是字符返回的值是数字或者相反

六、解决

在这些回答中，并没有抓住根本点，虽然上述也会造成bug不过显示效果是不一样的，之后我试了一下百度出的$set方法来解决。

这样做，视图是成功显示了，但是又出现一个问题，那就是，多出了一条数据来

之后经过论坛提醒，找到了错误原因

看你代码肯定写的有问题，$set一般是用来处理没有初始化的对象或者是处理数组的增删操作。因为vue无法对数组的增删做实时渲染，没初始化的对象也不可以实时渲染。

这句话如醍醐灌顶，让我瞬间想到了错误点在哪：
我在点击新增按钮时，因为有的参数不能直接用框架自带的重置方法，所以手动重置了一下，但却在新增的时候重置数据写成了this.changeHosform ={}，这就造成了对象无初始化数据
找到问题了，更改就简单了，重置数据时不直接写成空，而是使用键值对模式

七、部分代码

下面粘一下相关部分代码，希望对大家有点用处，另写代码时细心，不要忽略细节。

<el-dialog
      :title="changeName + 'XXXXXX'"
      :visible.sync="dialogVisible"
      class="dialog-edmin"
    >
      <el-form
        ref="changeHosform"
        :rules="rules"
        :model="changeHosform"
        label-width="120px"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="等级" prop="level">
              <el-select
                v-model="changeHosform.level"
                placeholder="请选择"
                :disabled="isdisabled"
                @change="levelChange()"
              >
                <el-option
                  v-for="item in levelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-form-item
            style="padding-left:10px"
            label="区划"
            v-if="
              changeHosform.level === 2 ||
                changeHosform.level === 3 ||
                changeHosform.level === 4
            "
          >
            <el-col
              style="padding-left:0px"
            >
              <el-select
                v-model="changeHosform.provinceNo"
                @change="provinceChange"
                placeholder="请选择"
                :disabled="isdisabled"
                filterable
              >
                <el-option
                  v-for="item in provinceOptions"
                  :key="item.id"
                  :label="item.regionName"
                  :value="item.regionNo"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col
              :span="6"
              v-if="changeHosform.level === 3 || changeHosform.level === 4"
            >
              <el-select
                v-model="changeHosform.cityNo"
                @change="cityChange"
                placeholder="请选择"
                :disabled="isdisabled"
                filterable
              >
                <el-option
                  v-for="item in cityOptions"
                  :key="item.id"
                  :label="item.regionName"
                  :value="item.regionNo"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col
              :span="6"
              v-if="changeHosform.level === 4"
            >
              <el-select
                v-model="changeHosform.areaNo"
                placeholder="请选择"
                :disabled="isdisabled"
                filterable
              >
                <el-option
                  v-for="item in areaOptions"
                  :key="item.id"
                  :label="item.regionName"
                  :value="item.regionNo"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-row>
    </el-form>
</el-dialog>


弹窗部分内容

changeHosform: {
        provinceNo: '',
        cityNo: '',
        areaNo: '',
        level: '',
      },
      levelOptions: [
        {
          label: '平台级',
          value: 1,
        },
        {
          label: '省级',
          value: 2,
        },
        {
          label: '市级',
          value: 3,
        },
        {
          label: '县级',
          value: 4,
        },
        {
          label: '医院级',
          value: 5,
        },
      ],
      provinceOptions: [], //省级列表
      cityOptions: [],//市级列表
      areaOptions: [],//区级列表

state中的部分数据

 created() {
    this.getprovinceList()
  },
//改变等级
    levelChange() {
      this.changeHosform.HspitalID = ''
      this.changeHosform.provinceNo = ''
      this.changeHosform.cityNo = ''
      this.changeHosform.areaNo = ''
    },
    //获取省列表
    getprovinceList() {
      let data = {
        RegionType: 1,
      }
      this.loading = true
      GetRegionList(data, this).then((res) => {
        if (res.code === 200) {
          this.provinceOptions = res.data
        } else {
          //用户登录验证超时，跳转登录页
          this.$notify.error({
            title: '错误',
            message: res.message,
          })
        }
        this.loading = false
      })
    },
    //改变省
    provinceChange(val) {
      let data = {
        RegionType: 2,
        regionNo: val,
      }
      this.loading = true   //改变loading状态
      this.cityOptions = [] //重置市级列表
      this.areaOptions = [] //重置区级列表
      this.changeHosform.cityNo = '' //重置市级code
      this.changeHosform.areaNo = '' //重置区级code
      GetRegionList(data, this).then((res) => {
        if (res.code === 200) {
          this.cityOptions = res.data
        } else {
          //用户登录验证超时，跳转登录页
          this.$notify.error({
            title: '错误',
            message: res.message,
          })
        }
        this.loading = false
      })
    },
    
    //改变市
    cityChange(val) {
      let data = {
        RegionType: 3,
        regionNo: val,
      }
      this.areaOptions = [] //重置区级列表
      this.changeHosform.areaNo = '' //重置区级code
      this.loading = true
      GetRegionList(data, this).then((res) => {
        if (res.code === 200) {
          this.areaOptions = res.data
        } else {
          //用户登录验证超时，跳转登录页
          this.$notify.error({
            title: '错误',
            message: res.message,
          })
        }
        this.loading = false
      })
    },
    //根据不同按钮确定弹窗
      changeServe(val, value) {
      if (val === 'addServe') {
        this.changeHosform = {
          provinceNo: '',
          cityNo: '',
          areaNo: '',
          level: '',
        }
        this.changeName = '新增'
        this.isdisabled = false
        this.dialogVisible = true
      }
      //其他按钮我就省略了
      }

今天的bug就介绍到这里了，希望对大家有帮助，祝大家轻松写代码，少加班不秃头，早日找到女朋友！！！！！！！