简介

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

示例

常规

<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: [],
  };
},