vue3+elementui plus 实现多选分页列表的新增和修改
业务需要实现这样的一个需求，要求添加标签时打开一个弹框（弹框如下页面）常规的一般是列表一页展示完，进行多选，这个比较简单些，但是有一个弊端数据量大的情况下，要么借助插件实现虚拟加载，（虚拟加载请百度搜索vxe-table插件）要么分页进行，此文档说的就是分页。
遇到的问题：
1.分页回显问题，借助 reserve-selection=“true” 页面刷新的时候进行保留所选项目，必须要有row-key 才能生效。
2.开始使用selection-change方法进行动态数据收集，会遇到页面一进去就执行的问题，后来替换
@select=“handleSelectionChange” @select-all=“handleAllChange” 单选，全选解决。
3.全选选择和取消区分不清的问题，只要翻页，其他页码已经选择的标签，再切换第一页全选handleAllChange时，参数就带有其他页码的选项，需要特殊处理，不然的话selecteds.length > 0一直是true,可能还有比我更好的办法，我暂时只是拿本页数据过滤掉了。
4.打开页面没有选中，全部请求数据进行选中不太显示，需要每次翻页手动选中即可。
<template>
<div>
<el-button @click="open" type="primary" link :icon="Plus">选择标签</el-button>
<div class="label-selected" v-if="valueDetail&&valueDetail.length>0">已选中：<span v-for="item in valueDetail" style="margin-right: 5px;">{{ item.label?item.label:'' }}</span></div>
<el-dialog :model-value="!!dialogVisible" class="common-address-dialog" @close="close" width="681px">
<template #header>
<div class="el-dialog__title">人群标签</div>
</template>
<div class="label-dialog-content" v-loading="loading">
<div class="tagBox" v-if="tagValue&&tagValue.length>0">
<el-tag v-for="(tagItem,index) in tagValue" class="mx-1" style="margin-right: 5px;margin-bottom: 4px;" :key="index" type="info" closable @close="method_handleTagClose(tagItem)">{{ tagItem.label }}</el-tag>
</div>
<div class="searchBox">
<el-input maxlength="20" style="width: 260px;" clearable placeholder="请输入人群名称进行搜索" v-model.trim="searchParams.crowdName"></el-input>
<el-button type="primary" @click="search()">搜 索</el-button>
</div>
<el-table :data="tableData" ref="userTable" class="userTable" style="width:100%" height="468" :row-key="getRowKeys" @select="handleSelectionChange" @select-all="handleAllChange">
<el-table-column type="selection" :reserve-selection="true"></el-table-column>
<el-table-column prop="crowdName" label="人群名称"></el-table-column>
<el-table-column prop="crowdDesc" label="人群描述"></el-table-column>
<el-table-column prop="hitPeopleNum" label="命中人数"></el-table-column>
<el-table-column prop="circleTime" label="最新圈选时间"></el-table-column>
</el-table>
<n-pagination style="margin-top: 12px;" v-model:current-page="searchParams.pageIndex" v-model:page-size="searchParams.pageSize" :page-sizes="[10, 20, 30, 40]" background hide-on-single-page layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
<template #footer>
<div style="text-align: right">
<el-button type="primary" plain @click="close">取 消</el-button>
<el-button type="primary" @click="onSubmit">保 存</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, ref, watch, computed, onActivated, nextTick, watchEffect } from "vue";
import { Close, Plus, Search } from "@element-plus/icons-vue";
import nPagination from "@/components/nPagination.vue";
import { api } from "../api/index";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
const props = defineProps({
modelValue: {
type: Array,
default: [],
required: true,
},
valueDetail: {
type: Array,
default: [],
required: true,
}
});
const emit = defineEmits(["update:modelValue", "confirm"]);
const userTable = ref(null);
const dialogVisible = ref(false);
const loading = ref(false);
const tableData = ref([]);
const multipleSelection = ref([]);
const multipleSelectionData = ref([]);
const total = ref(0);
const route = useRoute();
const getRowKeys = (row) => {
//唯一标识id，也可以是你自己数据源中的其他某个代表唯一的字段
return row.crowdNo
}
const searchParams = reactive({
crowdName: null,
pageIndex: 1,
pageSize: 10,
crowdType: '1',
excludeCrowd: route.query.crowdNo,
});
// 数组对象去重
function dataDeduplications(tempArr) {
for (let i = 0; i < tempArr.length; i++) {
for (let j = i + 1; j < tempArr.length; j++) {
if (tempArr[i].label == tempArr[j].label && tempArr[i].value == tempArr[j].value) {
tempArr.splice(j, 1);
j--;
};
};
};
return tempArr;
}
// 回显头部已经选择的公共标签值
const tagValue = computed(() => {
let resultData = [];
if (multipleSelection.value && multipleSelection.value.length > 0) {
multipleSelection.value.forEach(ele => {
multipleSelectionData.value.forEach(eles => {
if (ele == eles.crowdNo) {
resultData.push({ 'label': eles.crowdName, 'value': eles.crowdNo })
}
});
props.valueDetail.forEach(eless => {
if (ele == eless.value) {
resultData.push(eless)
}
});
});
}
return dataDeduplications(resultData);
})
//已经选中的值
watch(() => props.modelValue, (newValue, oldValue) => {
let getVal = newValue || [];
if (!Array.isArray(getVal)) {
getVal = [getVal]
}
multipleSelection.value = [...getVal];
},
{ immediate: true }
);
/**
* 打开
*/
function open() {
dialogVisible.value = true;
searchParams.crowdName = '';
search();
}
/**
* 关闭
*/
function close() {
dialogVisible.value = false;
};
/**
* 查询按钮
*/
function search() {
searchParams.pageIndex = 1;
getCrowdLabels();
};
/**
* 切换分页大小
* @param {Number} size
*/
function handleSizeChange(size) {
searchParams.pageIndex = 1;
searchParams.pageSize = size;
getCrowdLabels();
};
/**
* 切换分页
* @param {Number} index
*/
function handleCurrentChange(index) {
searchParams.pageIndex = index;
getCrowdLabels();
};
/**
* 获取人群标签列表
*/
function getCrowdLabels() {
loading.value = true;
let postData = {
pageIndex: searchParams.pageIndex,
pageSize: searchParams.pageSize,
crowdName: searchParams.crowdName,
crowdType: searchParams.crowdType,
excludeCrowd: searchParams.excludeCrowd,
};
return api("customer", "getCrowdLabels", postData)
.then(({ code, message, data = {} }) => {
if (code == 200) {
let resData = data.records || [];
tableData.value = resData;
total.value = data.total || 0;
setDefaultData(tableData.value)
} else {
ElMessage.warning(message);
}
})
.catch((err) => {
ElMessage.error(err);
})
.finally(() => {
loading.value = false;
});
};
/**
* 设置人群标签列表默认值
*/
function setDefaultData(resData) {
// // 根据之前选中的数据，在表格数据中重新设置选中状态
if (resData && resData.length > 0) {
nextTick(() => {
resData.forEach(ele => {
if (multipleSelection.value.includes(ele.crowdNo)) {
userTable.value.toggleRowSelection(ele, true);
}
});
})
}
};
// 单选,取消单选
function handleSelectionChange(selecteds, row) {
if (!multipleSelection.value.includes(row.crowdNo)) {
// 回显数据里没有本条，把这条加进来(选中)
multipleSelection.value.push(row.crowdNo);
multipleSelectionData.value.push(row);
} else {
// 回显数据里有本条，把这条删除(取消选中)
multipleSelection.value.forEach((crowdNo, index) => {
if (crowdNo === row.crowdNo) {
multipleSelection.value.splice(index, 1);
}
});
}
};
// 全选,取消全选
function handleAllChange(val) {
// 翻页时会把已经选择的回显在val,造成不能区分在本页到底是全选确定还是取消全选
let selecteds = [];
val.forEach(ele => {
tableData.value.forEach(eles => {
if (ele.crowdNo === eles.crowdNo) {
selecteds.push(ele)
}
});
});
if (selecteds.length > 0) {
selecteds.forEach(item => {
if (!multipleSelection.value.includes(item.crowdNo)) {
multipleSelection.value.push(item.crowdNo);
multipleSelectionData.value.push(item);
}
});
} else {
tableData.value.forEach(item => {
multipleSelection.value.forEach((crowdNo, index) => {
if (crowdNo === item.crowdNo) {
multipleSelection.value.splice(index, 1);
}
});
});
}
};
// 公共标签删除
function method_handleTagClose(tagItem) {
nextTick(() => {
if (tableData.value.some(item => { return item.crowdNo == tagItem.value })) {
tableData.value.forEach(ele => {
if (ele.crowdNo == tagItem.value) {
userTable.value.toggleRowSelection(ele, false);
}
let _index = multipleSelection.value.findIndex(item => item === tagItem.value);
if (_index > -1) { multipleSelection.value.splice(_index, 1) }
});
} else {
ElMessage.error('标签不在本页，无法删除!!!')
}
});
};
/**
* 提交
*/
const onSubmit = function () {
emit("update:modelValue", multipleSelection.value);
emit("confirm", tagValue.value, multipleSelection.value);
close();
};
</script>
<style lang="scss">
.label-selected {
width: 100%;
display: flex;
flex-wrap: wrap;
span {
font-size: 12px;
color: #02111f !important;
}
}
.common-address-dialog {
.el-checkbox__input.is-checked + .el-checkbox__label {
color: #02111f;
}
.el-dialog__header {
padding: 24px;
.el-dialog__title {
font-size: 14px;
line-height: 20px;
}
}
border-radius: 8px;
.el-dialog__body {
padding: 12px 24px;
font-size: 12px;
line-height: 23px;
color: #959ea6;
}
.el-dialog__footer {
padding: 0px 24px 24px;
display: flex;
justify-content: flex-end;
}
.label-dialog-content {
padding: 0px;
.tagBox {
max-height: 150px;
overflow: hidden;
overflow: auto;
margin-bottom: 10px;
font-size: 12px;
color: #02111f !important;
}
.searchBox {
margin-bottom: 10px;
}
}
}
</style>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
