vue el-element中el-select选中值,数据已经改变但选择框中不显示值,需要其他输入框输入值才显示这个选择框才会显示刚才选中的值
项目场景:<el-table-column label="税率" prop="TaxRate" width="180" align="center" show-overflow-tooltip><template slot-scope="{row, $index}"><el-form-item :prop="'InquiryItemList.' + $index +
·
项目场景:
<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方法,第一个值为改变谁,第二个值为改变值的坐标,第三个则是改变后数据,重新赋值给详情数据
可以根据自己的数据做相应调整,这样就可以正常显示选中的数据了
更多推荐
已为社区贡献9条内容
所有评论(0)