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

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

相关推荐
咖啡の猫1 分钟前
Vue收集表单数据
前端·javascript·vue.js
知识分享小能手10 分钟前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
大杯咖啡25 分钟前
一篇文章搞懂,浏览器强缓存以及协商缓存
前端·javascript
王六岁26 分钟前
# 🐍 前端开发 0 基础学 Python 入门指南: Python 元组和映射类型深入指南
前端·javascript·python
_志哥_28 分钟前
多行文本超出,中间显示省略号的终极方法(适配多语言)
前端·javascript·vue.js
王六岁29 分钟前
# 🐍 前端开发 0 基础学 Python 入门指南:常用的数据类型和列表
前端·javascript·python
1_2_3_30 分钟前
神级JS API,谁用谁好用
前端·javascript
用户66006766853936 分钟前
从送花表白实例读懂 JavaScript 对象字面量与代理模式
javascript
我是日安38 分钟前
从零到一打造 Vue3 响应式系统 Day 29 - readonly:数据保护实现
前端·javascript·vue.js
时代拖油瓶38 分钟前
我劝你必须知道——Intl.Segmenter
前端·javascript