12.记录Vue项目iview render select完成下拉框远程搜索和创建条目

实现效果请参考iview select组件远程搜索：https://www.iviewui.com/components/select

        render: (h, params) => {
            return h(
              "Select",
              {
                props: {
                  value: this.tableData[params.index].productNo,
                  remote: true, //是否使用远程搜索
                  filterable: true, //是否支持搜索
                  clearable: true, //是否可以清空选项，只在单选时有效
                  allowCreate: true, // 在 filterable 模式下，开启属性 allow-create 可以通过在输入框中输入文字来创建新的条目。
                },
                on: {
                  "on-create": (query) =>{
                    this.selectListno.unshift({
                      Yarn_Code: query,
                      mat_name: query,
                      yarn_ph: "",
                      yarn_pz: "",
                    })
                  },
                  "on-select": (value) => {
                    this.selectListno.forEach((res) => {
                      if (res.Yarn_Code == value.value) {
                        this.tableData[params.index].productNo = res.Yarn_Code;
                        this.tableData[params.index].batchSample = res.yarn_ph;
                        this.tableData[params.index].brand = res.yarn_pz;
                        this.tableData[params.index].NEW = true;
                      }
                    });
                  },
                  "on-query-change": (query) => {
                    this.remoteNo(query, params.index);
                  },
                  "on-clear": () =>{
                    this.selectListno = [];
                    this.tableData[params.index].NEW = false;
                  }
                },
              },
              this.selectListno.map((item) => {
                return h(
                  "Option",
                  {
                    // 下拉框的值
                    props: {
                      value: item.Yarn_Code,
                      label: item.mat_name,
                    },
                  },
                  [
                    h("span", item.mat_name),
                    h(
                      "span",
                      { style: { color: "#808695", "margin-left": "10px" } },
                      item.yarn_ph
                    ),
                    h(
                      "span",
                      { style: { color: "#808695", "margin-left": "10px" } },
                      item.yarn_pz
                    ),
                  ]
                );
              })
            );
          },