vue2 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 + '.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方法,第一个值为改变谁,第二个值为改变值的坐标,第三个则是改变后数据,重新赋值给详情数据
可以根据自己的数据做相应调整,这样就可以正常显示选中的数据了
在这里插入图片描述

Vue 2中,为Element UI的`el-autocomplete`组件实现远程搜索功能通常需要结合axios或fetch等HTTP请求库。首先,你需要设置`remote-method`属性,这个属性指定一个异步函数,该函数会在用户输入发生变化时触发网络请求。 下面是一个简单的示例: ```html <template> <el-autocomplete v-model="searchValue" placeholder="请输入搜索关键词" remote-method="getSuggestions" :remote-data-key="keyField" @select="handleSelect" clearable ></el-autocomplete> </template> <script> import axios from 'axios'; export default { data() { return { searchValue: '', suggestions: [], keyField: 'name', // 这里假设服务器返回的数据包含一个名为"name"的字段 }; }, methods: { getSuggestions(value) { const url = 'your-api-url'; // 替换为实际的API地址 return axios.get(url, { params: { keyword: value } }).then((response) => { this.suggestions = response.data; // 假设服务器返回的是一个包含建议的数组 }); }, handleSelect(item) { this.searchValue = item[this.keyField]; // 当用户选择一条记录时,更新输入 }, }, }; </script> ``` 在这个例子中,当你在输入框输入内容时,`getSuggestions`方法会被调用,向服务器发送一个包含当前输入作为查询参数的GET请求。当用户从下拉列表中选择一个选项时,`handleSelect`方法会将选中的项目名称设置回输入框。 关于如何在用户未选择任何数据并且输入框为空时自动清除内容,你可以添加一个自定义事件监听器,比如在`beforeDestroy`生命周期钩子中: ```javascript mounted() { window.addEventListener('input', () => { if (!this.searchValue) { this.searchValue = ''; } }); }, beforeDestroy() { window.removeEventListener('input', () => { if (!this.searchValue) { this.searchValue = ''; } }); }, ``` 这样每次用户停止输入,如果输入框内容为空,它就会清空。注意在销毁组件前移除这个事件监听,避免内存泄漏。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值