【前端】ElementUi 下拉框数据分页多选跨页回显
<template>
<div>
<el-select
v-model="selectedOptions"
multiple
placeholder="请选择"
@visible-change="handleVisibleChange"
class="custom-select"
popper-class="select-popover-class"
@change="selectedOptionsChange"
>
<!-- 自定义内容 -->
<template v-slot="dropdown" >
<!-- 搜索框 -->
<el-input
v-model="searchQuery"
placeholder="请输入搜索内容"
clearable
>
<el-button slot="append" icon="el-icon-search" @click="search" size="small" >搜索</el-button>
</el-input>
<!-- 滚动的选项区域 -->
<div class="options-container">
<el-checkbox
:value="checkboxValue"
:indeterminate="indeterminate"
@change="checkboxSelectAll"
>全选</el-checkbox>
<el-option
v-for="item in allOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-checkbox :value="selectedOptions.includes(item.value)" @change="itemCheckboxClick(item)" :label="item.label"></el-checkbox>
</el-option>
</div>
<!-- 分页部分，固定到底部 -->
<div class="pagination-container">
<el-pagination
background
layout="prev, pager, next"
:current-page="currentPage"
:page-size="pageSize"
:total="total"
@current-change="handlePageChange"
/>
</div>
</template>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedOptions: [], // 已选择的选项
allOptions: [], // 所有可选项
total: 0, // 总条目数
currentPage: 1, // 当前页数
pageSize: 10, // 每页显示条目数
searchQuery: '', // 搜索关键字
};
},
create(){
},
computed:{
//是否为全选状态
checkboxValue() {
if(this.selectedOptions.length && this.allOptions.length){
for (let i = 0; i < this.allOptions.length; i++) {
let allObj = this.allOptions[i];
let allObjVal = allObj.value
if(this.selectedOptions.includes(allObjVal)){
//包含
}else{
//不包含
return false;
}
}
return true;
}
return false;
},
//是否为半选状态
indeterminate() {
if(this.selectedOptions.length && this.allOptions.length){
let 是否存在包含 = false
let 是否存在不包含 = false
for (let i = 0; i < this.allOptions.length; i++) {
let allObj = this.allOptions[i];
let allObjVal = allObj.value
if(this.selectedOptions.includes(allObjVal)){
//包含
是否存在包含 = true
}else{
//不包含
是否存在不包含 = true
}
}
if(是否存在包含 && 是否存在不包含){
return true;
}
}
return false;
}
},
methods: {
//下拉框选中的事件
selectedOptionsChange(){
if(this.selectedOptions.length){
//去重
const uniqueArr = [...new Set(this.selectedOptions)];
this.selectedOptions = uniqueArr
}
},
//单选框点击事件
itemCheckboxClick(item){
let val = item.value
if(this.selectedOptions.includes(val)){
//存在则删除
let tmpSelectedOptions = []
//取消选中
for (let i = 0; i < this.selectedOptions.length; i++) {
let selectObjVal = this.selectedOptions[i];
if(val !== selectObjVal){
//不存在则添加进去
tmpSelectedOptions.push(selectObjVal);
}
}
this.selectedOptions = tmpSelectedOptions;
}else{
//不存在则添加
this.selectedOptions.push(val);
}
},
checkboxSelectAll(bool) {
// console.log('监听全选或反选事件', bool)
if(this.allOptions.length<=0){
return false;
}
if(bool){
for (let i = 0; i < this.allOptions.length; i++) {
let allObj = this.allOptions[i];
let allObjVal = allObj.value;
//判断是否已经选中了
if(!this.selectedOptions.includes(allObjVal)){
//不存在则添加进去
this.selectedOptions.push(allObjVal)
}
}
}else{
let tmpSelectedOptions = []
//取消选中
for (let i = 0; i < this.selectedOptions.length; i++) {
let selectObjVal = this.selectedOptions[i];
let 是否存在 = false;
for (let j = 0; j < this.allOptions.length; j++) {
let allObjVal = this.allOptions[j].value
if(allObjVal === selectObjVal){
是否存在 = true
break;
}
}
if(是否存在 === false){
//不存在则添加进去
tmpSelectedOptions.push(selectObjVal);
}
}
this.selectedOptions = tmpSelectedOptions;
}
return true;
},
重置参数(){
// this.allOptions = [];
// this.total = 0;
this.currentPage = 1;
this.searchQuery = '';
},
模拟调用接口返回数据(){
//这里调用服务端接口, 将分页参数 以及搜索条件传过去
let arr = []
//模拟数据
for (let i = 1; i <= this.pageSize; i++) {
arr.push({value:"value-"+this.currentPage+'-'+i, label:"名称-"+this.currentPage + '-'+i})
}
let 模拟接口数据 = {total:100, data:arr};
return 模拟接口数据;
},
//加载数据
loadData(){
let 模拟接口数据 = this.模拟调用接口返回数据()
this.allOptions = 模拟接口数据.data
this.total = 模拟接口数据.total; // 更新总数
},
// 分页切换时触发
handlePageChange(page) {
this.currentPage = page;
this.loadData(); // 更新当前页显示的数据
},
// 搜索功能处理
search() {
alert('点击搜索按钮')
this.loadData();
},
// 下拉框展开时触发
handleVisibleChange(visible) {
if (visible) {
this.重置参数();
// alert('下拉框展开时触发')
this.loadData(); // 模拟加载数据
}else{
// alert('下拉框关闭时触发')
}
}
}
};
</script>
<style>
/* 覆盖 Element UI 的默认样式 */
.el-select-dropdown__wrap {
max-width: 98% !important;
max-height: 100% !important; /* 使用 !important 确保优先级 */
overflow-y: auto;
margin-right: 0px;
}
.el-select-dropdown__list {
padding: 6px 10px !important;
}
.scroll-wrapper {
max-width: 100% !important;
position: relative;
max-height: 100% !important; /* 根据需要调整高度 */
overflow: hidden; /* 隐藏滚动条 */
}
/* 控制全选按钮样式 */
.select-popover-class .el-scrollbar__view > .el-checkbox{
padding: 5px 20px;
}
/* 取消多选框触发事件 */
.select-popover-class .el-scrollbar__view > li .el-checkbox {
pointer-events: none;
}
/* 隐藏多选框选中勾选样式 √ */
.select-popover-class .el-scrollbar__view > li::after {
display: none;
}
</style>
<style scoped>
/* 搜索框的样式 */
.el-input {
width: 100%;
margin-bottom: 10px;
}
/* 可滚动的选项区域 */
.options-container {
width: 100%;
max-height: 900px !important; /* 设置一个合适的高度来滚动 */
overflow-y: auto;
}
/* 分页部分固定在底部 */
.pagination-container {
position: relative;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
border-top: 1px solid #ebeef5;
background-color: #fff;
text-align: center;
}
</style>