element-ui中select下拉框,选择后绑定的对象赋值成功,但是选择框无法显示对应的label的坑~

这个是今天遇到一个坑,因为也是第一次使用vue+element-ui开发,所以记录一下自己遇到的一些问题。
这个问题是在开发省市区三级联动组件的时候遇到的,现在先上下代码;

页面

 <el-form-item label="城市" prop="valueCity">
              <el-select v-model="addRuleForm.valueCity" placeholder="请选择市" @change="changeCity">
                <el-option
                  v-for="item in cityOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="区县" prop="valueOrigin">
              <el-select v-model="addRuleForm.valueOrigin" placeholder="请选择区" @change="changeOrigin">
                <el-option
                  v-for="item in originOptions"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>

JS代码

 // 选择省
    changeProvince(val) {
      this.provinceList.forEach((province, index) => {
        if (val.toString() === this.provinceList[index].value) {
          this.cityOptions = this.provinceList[index].children;
          this.addRuleForm.valueCity = this.provinceList[index].children[0].value;//设置市的值
           this.addRuleForm.valueOrigin = this.provinceList[index].children[0].children[0].value;//设置县的值
          this.originOptions = this.provinceList[index].children[0].children
         
        }
      })
    },
    // 选择市
    changeCity(val) {
      this.cityList.forEach((city, index) => {
        if (val.toString() === this.cityList[index].value) {
          this.originOptions = this.cityList[index].children
          this.addRuleForm.valueOrigin = this.cityList[index].children[0].value//设置县的值;
        }
      })
    },
    // 选择区
    changeOrigin(val) {
      this.addRuleForm.valueOrigin=val;
      //添加this.$forceUpdate();进行强制渲染,效果实现。搜索资料得出结果:因为数据层次太多,render函数没有自动更新,需手动强制刷新。
      this.$forceUpdate();
    },     

JSON格式

[
    {
        "name": "北京市",
        "value": "110000"
    },
    {
        "name": "市辖区",
        "value": "110100",
        "parent": "110000"
    },
    {
        "name": "县",
        "value": "500200",
        "parent": "500000"
    },
.......省略
]

总结

vue强制更新$forceUpdate()

添加this.$forceUpdate();进行强制渲染,效果实现。搜索资料得出结果:因为数据层次太多,render函数没有自动更新,需手动强制刷新。

调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。

# Vue   Bug  

评论

公众号:mumuser

企鹅群:932154986

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×