vue el-element中el-select选中值，数据已经改变但选择框中不显示值，需要其他输入框输入值才显示这个选择框才会显示刚才选中的值

Posted 2022-02-23 野猪佩奇007

项目场景：

<el-table-column label="税率" prop="TaxRate" width="180" align="center" show-overflow-tooltip>
              <template slot-scope="row, $index">
                <el-form-item :prop="'InquiryItemList.' + $index + '.TaxRate'" label-width="0">
                  <el-select v-model="row.TaxRate" size="small" placeholder="请选择开票税率" @change="rateItemChange(row.TaxRate,$index,row)">
                    <el-option v-for="(item,index) in taxRateOptions" :key="index" :label="item.Label" :value="item.Value"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>

问题描述：

el-select选中值，数据已经改变但选择框中不显示值，需要其他输入框输入值才显示这个选择框才会显示刚才选中的值

---

解决方案：

给el-select标签添加一个change事件
@change=“rateItemChange(row.TaxRate,$index,row)”
第一个值为选择的数值，暂时用不到，第二个值为数据的下标，用于事件改变值时提供坐标，第三个值为改变后的整条数据

 methods: 
    rateItemChange(val, index, item) 
      console.log("获取数据值，重新赋值", val, index,item);
      this.$set(this.offerBatchModifyData.InquiryItemList, index, item);
      console.log(this.offerBatchModifyData);
    ,

this.offerBatchModifyData是我的详情数据，InquiryItemList是数组，
this.$set方法，第一个值为改变谁，第二个值为改变值的坐标，第三个则是改变后数据，重新赋值给详情数据
可以根据自己的数据做相应调整，这样就可以正常显示选中的数据了