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

项目场景:

javascript 复制代码
<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)"
第一个值为选择的数值,暂时用不到,第二个值为数据的下标,用于事件改变值时提供坐标,第三个值为改变后的整条数据

javascript 复制代码
 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方法,第一个值为改变谁,第二个值为改变值的坐标,第三个则是改变后数据,重新赋值给详情数据

可以根据自己的数据做相应调整,这样就可以正常显示选中的数据了

相关推荐
小时前端9 分钟前
Vue基础10题:答错一道,别说你熟悉Vue
vue.js
Magicman25 分钟前
JavaScript-事件学习
javascript
知识分享小能手28 分钟前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发
aidingni8882 小时前
掌握 TCJS 游戏摄像系统:打造动态影院级体验
前端·javascript
有梦想的攻城狮3 小时前
从0开始学vue:npm命令详解
前端·vue.js·npm
我是日安3 小时前
从零到一打造 Vue3 响应式系统 Day 23 - Watch:基础实现
前端·javascript·vue.js
FogLetter3 小时前
Map 与 WeakMap:内存管理的艺术与哲学
前端·javascript
前端伪大叔3 小时前
第15篇:Freqtrade策略不跑、跑错、跑飞?那可能是这几个参数没配好
前端·javascript·后端
xcg3401236 小时前
ElementUI-Table 表格实现行拖拽
elementui·table·行拖拽