Vue3的el-table-column下拉输入实时查询API数据选择的实现方法

ops/2025/2/2 18:23:07/

由于本人对el-table-column有下拉输入选择的要求，根据网上搜索的资料及本人优化，推出我比较满意的方法，供各位读者参考使用。

效果图

在这里插入图片描述

el-table-column写法

<el-table-columnlabel="货品编号"align="center"prop="productCode"width="180"
><template #default="scope"><el-selectv-model="scope.row.productCode"placeholder="请输入货品编号"@change="changeProduct(scope.$index, scope.row)"filterableremote:remote-method="remoteProductCode":loading="loading"remote-show-suffix><el-optionv-for="item in productOptions":key="item.productId":label="item.productCode":value="item.productId"></el-option></el-select></template>
</el-table-column>

changeProduct写法

选择货品编号，展示接口提供的信息

清空选择的数据
获取选择的数据
字段读取并展示对应的数据

javascript">// 选择货品
function changeProduct(index, row) {form.value.details[index] = {productCode: null,productName: null,};let lists = [];productOptions.value.forEach((item) => {lists = item;});form.value.details[index] = {productCode: lists.productCode,productName: lists.productName,};form.value.details = [...form.value.details];
}

remoteProductCode写法

查询货品编号信息

原理：if有指定内容查询则显示对应信息，else显示全部

optionReset重置下拉框表单
listProduct调用API接口

javascript">function remoteProductCode(query) {optionReset();if (query) {loading.value = true;setTimeout(() => {option.value.productCode = query;listProduct(option.value).then((response) => {productOptions.value = response.rows;});loading.value = false;productOptions.value = list.value.filter((item) => {return item.label.toLowerCase().includes(query.toLowerCase());});}, 200);} else {listProduct(option.value).then((response) => {productOptions.value = response.rows;});}
}