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

由于本人对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

相关推荐
kfepiza3 小时前
JavaScript将String转为base64 笔记250802
开发语言·javascript·笔记
Warren983 小时前
Vue2博客项目笔记(第一天)
java·开发语言·javascript·vue.js·windows·笔记·ecmascript
王者鳜錸3 小时前
VUE+SPRINGBOOT从0-1打造前后端-前后台系统-邮箱重置密码
前端·vue.js·spring boot
独泪了无痕5 小时前
深入浅析Vue3中的生命周期钩子函数
前端·vue.js
小白白一枚1115 小时前
vue和react的框架原理
前端·vue.js·react.js
得物技术7 小时前
Java SPI 机制初探|得物技术
javascript
kngines7 小时前
【Node.js从 0 到 1:入门实战与项目驱动】1.1 什么是 Node.js?(定义、运行环境、与浏览器 JavaScript 的区别)
开发语言·javascript·node.js
一个很帅的帅哥7 小时前
Node.js和Javascript中的async和await
javascript·node.js·async·promise·await
星空下的曙光8 小时前
React 虚拟 DOM Diff 算法详解,Vue、Snabbdom 与 React 算法对比
vue.js·算法·react.js
生活不易,被迫卖艺8 小时前
Redux与React-环境准备(React快速上手1)
前端·javascript·react.js