江苏中淮建设集团有限公司网站湘建网

第一章 前言

1.1 实现效果

1.2 需求及准备

• 开发前言：由于公司针对下拉框都是直接使用组件，并且下拉数据都不是特别多。而小编的需求是接口直接返回了2000多条数据，一个原因是数据特别庞大，请求接口需要花费特别长时间；另一个是2000调数据我们也不好一次性都展示在下拉框，体验感不是很好；于是通过小编的研究与优化，与后端约定将数据改成提供分页接口，并且小编也利用element-plus组件提供了两个方法：一个是直接使用无限滚动组件，触底掉接口（Infinite Scroll）；另一个是再二次封装一个分页的下拉框，经过最终讨论，确定方案用后者(原因：扩展性更高，且后续其他项目可通用) 
• 核心需求：因下拉框中的数据过多，所以需要使用分页的方式来实现。
• 工具：element-plus

设计 | Element Plus

 Infinite Scroll 无限滚动 | Element Plus

• v-bind="$attrs" 理解

【vue】v-bind=“$attrs“理解与使用-CSDN博客

• 插槽

【vue】slot插槽：灵活内容分发的艺术-CSDN博客 

第二章 源代码

2.1 组件开发

• 实现思路：

1. 基于element-plus开发，必须需要两个组件el-selec和组件el-pagination
2. 需要能继承到上面两个组件的所有属性，减少任务量
3. 支持是否可搜索（可用props控制显隐或者插槽等）；是否可分页（由于小编的需求是支持分页，所以小编的思路是默认就有，大家可根据需求添加配置项或者做成插槽）；
4. 分页与下拉框数据联动；
5. 要学会利用v-model对某些必要数据双向绑定方便我们对数据的处理
6. 除了以上必要功能，还有就是样式了，也要稍微处理

• 注意：小编在封装时会已经使用一些element组件的配置项，如果父组件在使用时用了同名的属性，则会覆盖；大家需要留意一下
• 组件原代码如下

<!-- 组件名：ui-select --><script setup>
// 接收一些必要的配置项
const props = defineProps({val: {type: String,default: ''},// 选择框宽度width: {type: String,default: ''},// options弹窗宽度optionsWidth: {type: String,default: ''},// 配置项options: {type: Array,default: () => [{id: 1,label: 'Option1',value: 'Option1'}]},// 分页数据pageData: {type: Object,default: () => {return {pageNo: 1,pageSize: 10,total: 20}}}
})const emit = defineEmits(['update:val', 'update:pageData', 'pageChange'])
const selectVal = ref('')
const page = ref({})
onMounted(() => {const { val, pageData } = props// element组件是支持select的双向绑定的，所以小编单独用了一个新的变量处理selectVal.value = val// 分页数据page.value = pageData
})
const selectChange = (item) => {// select选中值的更新emit('update:val', item)
}
const pageChange = () => {// 分页变化更新分页数据emit('update:pageData', page.value)
。// 同时emit一个方法，让父组件可以利用这个方法执行某些操作emit('pageChange')
}
</script><template><div><!-- v-bind="$attrs"小编前面有提到，就是完整的拿到父组件传的参数,从而不需要props再接一层 --><!-- select 和 pagination都设置v-bind="$attrs"，继承两个组件的配置项 --><!-- 注意：小编在封装的时候已经使用了一些element组件的配置项，如果父组件在使用时用了同名的属性，则会覆盖 --><el-selectv-model="selectVal"v-bind="$attrs":style="{width: width || '100%'}"@change="selectChange"class="custom_select"><!-- 最小宽度是分页撑的宽度 --><div:style="{width: optionsWidth || '100%'}"class="options_content"><!-- 这里使用到了插槽，主要是扩展我们二次封装的select组件是否可搜索或者再前面需要加什么内容…… --><slot name="header" class="header"></slot><!-- element的select的options配置项 --><div class="options_main"><el-optionv-for="item in options":key="item.id":label="item.label":value="item.value"/></div><!-- 分页组件 --><!-- 注意这里也有v-bind="$attrs"使用 --><el-paginationv-model:current-page="page.pageNo":page-size="page.pageSize"layout="prev, pager, next":total="page.total"@current-change="pageChange"v-bind="$attrs"class="pagination_page"/></div></el-select></div>
</template>// 下面就是我们针对二次封装组件的一些其他样式
<style lang="scss" scoped>
.pagination_page {width: 100%;padding: 10px 20px 10px 20px;display: flex;align-items: center;justify-content: flex-end;
}
.options_main {// element select组件的弹窗是在根下的，不好直接设置弹窗的高，只能限制内容了height: 140px;margin: 0 20px;overflow: auto;
}
::-webkit-scrollbar {width: 5px;
}
</style>

2.2 组件使用

<!--
说明：1、placeholder、clearable是el-select组件的属性，由于我们使用了$attrs,所以再uiselect直接使用也是可以生效的；同理background是el-pagination的也是可以的2、小编使用了header插槽为分页组件提供了可搜索的功能3、要留意这些字段的含义
-->
<!--
解释一下字段：
aiForm.description: 下拉框绑定的值
scopePage: 分页数据对象{pageNo: 1,pageSize: 10,total: 100}
decOptions: 下拉数据
scopeSearchForm.description: 搜索关键字
-->
<UiSelectv-model:val="aiForm.description"v-model:pageData="scopePage"placeholder="行业表诉"class="ai_search-border margin_right_bottom"width="150px":options="decOptions"background@pageChange="getDescriptions"clearable
><template #header><div class="scope_header"><el-inputv-model="scopeSearchForm.description"class="ai_search-border margin_right_bottom"style="border-color: #dcdfe6"placeholder="请输入关键字"clearable><template #append><el-icon style="cursor: pointer" @click="getDescriptions"><Search /></el-icon></template></el-input></div></template>
</UiSelect>