el-select的remote方式的组件封装(大数据下的下拉筛选)

一.最终实现效果

 二.入参反参说明

入参:
keyName：下拉选项数据的key字段，如:key="key",那这个keyName取值为key
labelName：下拉选项数据的label字段，如:label="name",那这个labelName取值为name
valueName:下拉选项数据的value字段，如:value="bankValue",那这个valueName取值为bankValue
remoteUrl:请求的url
queryField:select是根据哪个字段进行的查询，比如需要{name:'hz'},这里传参数就是name
requestWay:我项目里面存在2种请求方式，用这个作为区分
placeholder:预置数据
inputLimit:超出多少文字开始进行搜索
resultField：后端返回的数据，是存在data的哪一层，比如是data.list,这个值取list，比如是data.data，这个值取data

反参:
this.$emit("change", re);父组件通过change事件获取勾选的值，勾选值分为{value:val,row:row},value是勾选数据的key值，row是整条数据

initData();此函数供父组件调用，来设置初始值，也可以设置初始勾选

clearValue();此函数供父组件调用，用来清空value值

 三.使用实例：

<select-remote
       ref="selectRemote"
       placeholder="请选择门店(支持模糊搜索)"
       :inputLimit="0"
       keyName="storeNo"
       labelName="storeName"
       valueName="storeNo"
       requestWay="myrequest"
       remoteUrl="/personal/subselect/store/query"
       @change="changeStore"
       queryField="storeName"
       resultField="data"
></select-remote>

 四.完整代码：

<template>
  <div class="select-remote">
    <el-select
      v-model="value"
      style="width: 100%"
      filterable
      remote
      clearable
      reserve-keyword
      :placeholder="placeholder"
      :remote-method="remoteMethod"
      :loading="loading"
      @change="change"
    >
      <el-option
        v-for="item in options"
        :key="item[keyName]"
        :label="item[labelName]"
        :value="item[valueName]"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import kayak from "@/frame/kayak.js";
import myrequest from "@/utils/myrequest.js";
export default {
  name: "selectRemote",
  props: {
    keyName: {
      type: String,
      default: "value",
    },
    labelName: {
      type: String,
      default: "label",
    },
    valueName: {
      type: String,
      default: "value",
    },
    remoteUrl: {
      type: String,
      default: "",
    },
    queryField: {
      //请求url的查询字段名称，必传
      type: String,
      default: "",
    },
    requestWay: {
      //kayak，对应以前的kayak请求，myrequest对应myrequest请求
      type: String,
      default: "kayak",
    },
    placeholder: {
      type: String,
      default: "至少输入3个关键字搜索",
    },
    inputLimit: {
      //输入超出多少文字进行查询，默认为2
      type: Number,
      default: 3,
    },
    resultField: {
      //返回结果是.data还是.list，去自定义处理
      type: String,
      default: "list",
    },
  },
  data() {
    return {
      loading: false,
      options: [],
      value: "",
    };
  },
  methods: {
    remoteMethod(query) {
      let canLoad = false;
      if (this.inputLimit == 0) {
        //限制为0的在0个字符串的时候就可以进行搜索
        canLoad = true;
      } else {
        canLoad = query !== "" && query.length >= this.inputLimit;
      }
      if (canLoad) {
        this.loading = true;
        let params = {};
        params[this.queryField] = query;
        if (this.requestWay == "kayak") {
          kayak.rpc(this.remoteUrl, params).then((res) => {
            this.options = res[this.resultField];
            this.loading = false;
          });
        } else {
          myrequest.get(this.remoteUrl, { params }).then((res) => {
            this.options = res[this.resultField];
            this.loading = false;
          });
        }
      } else {
        this.options = [];
      }
    },

    clearValue() {    //供父组件调用，清空组件值
      this.value = "";
    },

    initData(val) {
      //存在编辑的时候可能需要父组件初始化数据
      let params = {};
      params[this.queryField] = val;
      if (this.requestWay == "kayak") {
        kayak.rpc(this.remoteUrl, params).then((res) => {
          this.loadFirstData(res, val);
        });
      } else {
        myrequest.get(this.remoteUrl, { params }).then((res) => {
          this.loadFirstData(res, val);
        });
      }
    },

    loadFirstData(res, val) {   //加载第一条数据，或者放入所有数据,根据val是否有值来判断
      this.options = res[this.resultField];
      this.loading = false;
      if (val) {
        //传了参数就默认选中第一条，没有，就做个初始化
        this.$nextTick(() => {
          //默认选中第一条
          this.value = this.options[0][this.valueName];
        });
      }
    },

    change() {      //筛选事件抛出勾选数据
      let row = this.options.filter((item) => {
        return this.value == item[this.valueName];
      })[0];
      let re = {
        value: this.value,
        row: row,
      };
      this.$emit("change", re);
    },
  },
};
</script>

<style lang="scss" scoped>
.select-remote {
  width: 100%;
}
</style>