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

查询货品编号信息

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

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

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;
    });
  }
}