简介

Element-plus，select二次封装。el-select加载大数据量的处理插件。

使用之前，请先安装Element-plus，基于ElFormItem、ElSelect、ElOption。

功能

1.基于el-select，重写filter-method；

2.实现大数据默认显示量；

3.提供检索功能，回车检索。

快速开始

npm i big-select -S

快速应用

全局注入

import BigSelect from 'big-select'
app.use(BigSelect);

局部注入

import { BigSelect } from 'big-select';
export default {
  name: 'App',
  components: {
    BigSelect
  }
}

主参数

参数 | 类型 | 必填项 | 默认值 | 参考值 | 说明 ---- | ----- | ------ | ------ | ------ | :------ v-model | String, Number | √ | | | select选中项的值。 data | Array | √ | | | 大数据，原始数据。 opts | Object | × | { key: 'companyName', id: 'id' } | | opts。 label | String | × | 大数据 | | form-item label值。 disabled | Boolean | × | false | | form-item disabled值。 prop | String | × | enterpriseInfoId | | form-item prop值。 size | String | × | default | | form-item size值。 clearable | Boolean | × | true | | form-item clearable值。 multiple | Boolean | × | false | | form-item multiple值。 multipleLimit | Number | × | 0 | | form-item multiple-limit值。 placeholder | String | × | 输入关键字回车检索 | | form-item placeholder值。 max | Number | × | 100 | | 最大显示条数。

opts参数

参数 | 类型 | 必填项 | 默认值 | 说明 ---- | ----- | ------ | ------ | :------ key | String | × | companyName | 需要搜索的字段。 id | String | × | id | 需要搜索的id字段。

方法

参数 | 类型| 解释 ---- | ----- | :------ @getChooseData | 回调函数 | (Object | Array) => {}。

示例

常规

<SelectBigData
  v-model="queryParams.enterpriseInfoId"
  :data="enterpriseInfoOptions"
  formItemLabel="企业名称"
  size="small"
></SelectBigData>

data() {
  return {
    queryParams: {
      enterpriseInfoId: undefined,
    },
    enterpriseInfoOptions: [],
  };
},

多选

<BigSelect
  v-model="queryParams.enterpriseInfoIds"
  :data="enterpriseInfoOptions"
  formItemLabel="企业名称"
  style="width: 300px;"
  :clearable="false"
  @getChooseData="getChooseData"
  :multiple="true"
  :multipleLimit="3"
></BigSelect>

data() {
  return {
    queryParams: {
      enterpriseInfoIds: [],
    },
    enterpriseInfoOptions: [],
  };
},