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

KrityCat2025-01-31 14:12

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

效果图

el-table-column写法

html 复制代码

<el-table-column
  label="货品编号"
  align="center"
  prop="productCode"
  width="180"
>
  <template #default="scope">
    <el-select
      v-model="scope.row.productCode"
      placeholder="请输入货品编号"
      @change="changeProduct(scope.$index, scope.row)"
      filterable
      remote
      :remote-method="remoteProductCode"
      :loading="loading"
      remote-show-suffix
    >
      <el-option
        v-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;
    });
  }
}

源码分析

关于源码取自铠思进销存系统的ks-vue3/src/views/system/purchase/paymentDocumentProcessing.vue