基于elementUi的分页选择器(el-select在数据量过多时不好用)

背景

        基于项目开发,有一个form表单用到很多接口进行选择，测试环境数据量不大，就一次性查询了，正式环境上线后好几个接口数据量在万级别，导致内存溢出，且页面卡顿，后想办法解决。首先尝试用el-select里面嵌套分页，试了好几次，包括分页、远程搜索等，出现一个问题解决一个问题，但问题源源不断，后改用此方法，进行弹窗选择。

这样的好处也是，打开弹窗时才请求接口获取数据，并不会在打开表单的时候全部请求，导致数据过多内存溢出。

效果图

组件代码

<!--选择器-->
 <el-select    
           v-model="data"
           clearable
           placeholder="请选择"
           value-key="shipNo"
           @change="selectShip"
           @click.native="clickShipForm">
</el-select>

<!--选择弹窗-->
<el-dialog :visible.sync="selectShipDialog.dialogVisible" class="dialogClass" @close="closeShipDialog"
                   :close-on-click-modal="false">
	<div v-loading="selectShipDialog.loadingData" class="shipDialogContent">
		<div slot="title" class="dialog-title">
			<section>
				<h1 class="dialogTit">弹窗选择器</h1>
			</section>
		</div>
		<!--输入模糊查询-->
		<div class="searchContent">
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-input v-model="selectShipDialog.shipNam" placeholder="请输入船名"></el-input>
					</div>
				</el-col>
				<el-col :span="2.5">
					<div class="grid-content bg-purple">
						<el-button type="primary" @click="fuzzyQueryShip" icon="el-icon-search">查询</el-button>
					</div>
				</el-col>
				<el-col :span="3">
					<div class="grid-content bg-purple">
						<el-button @click="resetFuzzyQuery" icon="el-icon-refresh">重置</el-button>
					</div>
				</el-col>
			</el-row>
		</div>
		<el-table :data="shipList" height="480" @cell-dblclick="shipInfoDbClick">
			<el-table-column property="shipStatNam" label="状态" width="100"></el-table-column>
			<el-table-column property="shipNam" label="姓名" width="200"></el-table-column>
			<el-table-column property="shipNo" label="年龄" width="100"></el-table-column>
			<el-table-column property="voyage" label="性别"></el-table-column>
			<el-table-column property="tradeNam" label="列名">
				<template slot-scope="scope">
					<el-tag :type="scope.row.value=== '1' ? 'primary' : 'success'" disable-transitions>
						{{ scope.row.value}}
					</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<div class="dialogPagination">
			<el-pagination
				:current-page="selectShipDialog.currentPage"
				:page-size="selectShipDialog.pageSize"
				:pager-count="15"
				layout="prev, pager, next"
				:total="selectShipDialog.total"
				@current-change="changeShipPage"
				@size-change="changeShipSize">
			</el-pagination>

		</div>
	</div>
</el-dialog>

这里有几个注意的地方:

1. el-select不要使用filterable或其他用不到的属性,或导致点击的时候出现一个空的弹框;
2. el-select的change事件主要用于点叉清空时对数据更改;

CSS样式

/*弹窗的border弧度*/
.dialogClass >>> .el-dialog {
    border-radius: 15px;
}

/*弹窗头部标题的高度*/
.dialogClass >>> .el-dialog__header {
    padding: 0 20px 10px;
}

/*自定义头部的高度调整后关闭弹窗的叉会被覆盖*/
.dialogClass >>> .el-dialog__headerbtn {
    z-index: 10;
}