element-UI select下拉框 加搜索 拼音搜索 滚动加载新的数据

DOM 写法

 <el-form-item
                  label="样品名称"
                  prop="sampleName"
                  label-width="150"
                >
                  <el-select
                    v-model="queryParams.sampleName"
                    placeholder="样品名称"
                    filterable
                    clearable
                    size="small"
                    :filter-method="sampleNamefilter"
                    v-loadmore="loadMore"
                  >
                    <!--  v-show="
                      roles ? true : tenantId == dict.tenantId ? true : false
                    " -->
                    <el-option
                      v-for="dict in templateListAll"
                      :key="dict.templateId + 'u'"
                      :label="dict.sampleName"
                      :value="dict.sampleName"
                    />
                  </el-select>
                </el-form-item>

先导入cnchar插件 没有的可以 安装 npm install cnchar

<script>
import cnchar from "cnchar";
</script>

自定义一个指令，这个指令服务的是 滚动事件，滚动触发加载数据。

  directives: {
    loadmore: {
      inserted: function (el, binding) {
        const SELECTWRAP_DOM = el.querySelector(
          ".el-select-dropdown .el-select-dropdown__wrap"
        );
        SELECTWRAP_DOM.addEventListener("scroll", function () {
          const CONDITION =
            this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (CONDITION) {
            binding.value();
          }
        });
      },
    },
  },
  methods: {
  // 过滤输入框内容
sampleNamefilter(v) {
      this.templateListAll = this.templateListAllcoyp.filter((item) => {
        if (item.sampleName.indexOf(v) !== -1) return true;
        let arr = item.sampleName.spell("low", "array");
        let arr2 = item.sampleName.spell("low", "first");
        let spell = arr.join("");
        let lengths = [0];
        for (var i = 0; i < arr.length - 1; i++) {
          lengths.push(lengths[i] + arr[i].length);
        }
        return (
          lengths.indexOf(spell.indexOf(v)) !== -1 || arr2.indexOf(v) !== -1
        );
      });
    },
    loadMore() {
      this.pageSize += 8;
      let params = {
        pageNum: 1,
        pageSize: this.pageSize,
        templateStatus: "1",
      };
      this.getListAll(params);
    },
     // 查询
    getListAll(proparams) {
      listTemplate(proparams).then((response) => {
        if (response.code == 200) {
          this.templateListAll = response.rows;
          this.templateListAllcoyp = response.rows;
        }
      });
    },
}