2023-08-17 avue select下拉框设置远程搜索清

{
  label: "xx名称",
  prop: "xxId",
  type: "select",
  search: true,
  remote: true, // 设置远程搜索
  dicUrl: "/api/prefix-xx/xx/list?name={{key}}",
  dicFormatter: (data) => {
    return data.data.records
  },
  props: {
    label: "name",
    value: "id",
  },
  dataType: "number",
  searchLabel: "xx",
  searchSpan: 4,
},

项目需求，需要从一张表中读取所有记录中的name和id字段逐一配对为数据字典中的一项，当数据量很大之后，后端一般会限制每次查询的记录数量，于是选择远程搜索，开销也会小一些，但是出现了一些问题：

选定某项之后想要更换选项，发现点击后下拉列表不出现

{
  label: "xx名称",
  prop: "xxId",
  type: "select",
  search: true,
  remote: true, // 设置远程搜索
  dicUrl: "/api/prefix-xx/xx/list?name={{key}}",
  dicFormatter: (data) => {
    return data.data.records
  },
  props: {
    label: "name",
    value: "id",
  },
  dataType: "string", // 修改为 string
  searchLabel: "xx",
  searchSpan: 4,
},
 

再次点击更换选项后更新内容实际为props中的id

{
  label: "xx名称",
  prop: "xxId",
  type: "select",
  search: true,
  remote: true, // 设置远程搜索
  dicUrl: "/api/prefix-xx/xx/list?name={{key}}",
  dicFormatter: (data) => {
    return data.data.records
  },
  change: (row, column, value) => {
    column[1].searchValue = value;
  },
  props: {
    label: "name",
    value: "id",
  },
  dataType: "string", // 修改为 string
  searchLabel: "xx",
  searchSpan: 4,
},