vue3+elementui plus如何實(shí)現(xiàn)多選分頁列表的新增和修改
更新時(shí)間：2025年06月18日 08:41:36 作者：阿飛920
這篇文章主要介紹了vue3+elementui plus如何實(shí)現(xiàn)多選分頁列表的新增和修改問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
業(yè)務(wù)需要實(shí)現(xiàn)這樣的一個(gè)需求，要求添加標(biāo)簽時(shí)打開一個(gè)彈框（彈框如下頁面）常規(guī)的一般是列表一頁展示完，進(jìn)行多選，這個(gè)比較簡(jiǎn)單些，但是有一個(gè)弊端數(shù)據(jù)量大的情況下，要么借助插件實(shí)現(xiàn)虛擬加載，（虛擬加載請(qǐng)百度搜索vxe-table插件）要么分頁進(jìn)行，此文檔說的就是分頁。
遇到的問題
1.分頁回顯問題
借助 reserve-selection=“true” 頁面刷新的時(shí)候進(jìn)行保留所選項(xiàng)目，必須要有row-key 才能生效。
2.開始使用selection-change方法
進(jìn)行動(dòng)態(tài)數(shù)據(jù)收集，會(huì)遇到頁面一進(jìn)去就執(zhí)行的問題，后來替換 @select=“handleSelectionChange” @select-all=“handleAllChange” 單選，全選解決。
3.全選選擇和取消區(qū)分不清的問題
只要翻頁，其他頁碼已經(jīng)選擇的標(biāo)簽，再切換第一頁全選handleAllChange時(shí)，參數(shù)就帶有其他頁碼的選項(xiàng)，需要特殊處理，不然的話selecteds.length > 0一直是true,可能還有比我更好的辦法，我暫時(shí)只是拿本頁數(shù)據(jù)過濾掉了。
4.打開頁面沒有選中
全部請(qǐng)求數(shù)據(jù)進(jìn)行選中不太顯示，需要每次翻頁手動(dòng)選中即可。
<template>
<div>
<el-button @click="open" type="primary" link :icon="Plus">選擇標(biāo)簽</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">人群標(biāo)簽</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="請(qǐng)輸入人群名稱進(jìn)行搜索" 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="命中人數(shù)"></el-table-column>
<el-table-column prop="circleTime" label="最新圈選時(shí)間"></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) => {
//唯一標(biāo)識(shí)id，也可以是你自己數(shù)據(jù)源中的其他某個(gè)代表唯一的字段
return row.crowdNo
}
const searchParams = reactive({
crowdName: null,
pageIndex: 1,
pageSize: 10,
crowdType: '1',
excludeCrowd: route.query.crowdNo,
});
// 數(shù)組對(duì)象去重
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;
}
// 回顯頭部已經(jīng)選擇的公共標(biāo)簽值
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);
})
//已經(jīng)選中的值
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();
}
/**
* 關(guān)閉
*/
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();
};
/**
* 獲取人群標(biāo)簽列表
*/
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;
});
};
/**
* 設(shè)置人群標(biāo)簽列表默認(rèn)值
*/
function setDefaultData(resData) {
// // 根據(jù)之前選中的數(shù)據(jù)，在表格數(shù)據(jù)中重新設(shè)置選中狀態(tài)
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)) {
// 回顯數(shù)據(jù)里沒有本條，把這條加進(jìn)來(選中)
multipleSelection.value.push(row.crowdNo);
multipleSelectionData.value.push(row);
} else {
// 回顯數(shù)據(jù)里有本條，把這條刪除(取消選中)
multipleSelection.value.forEach((crowdNo, index) => {
if (crowdNo === row.crowdNo) {
multipleSelection.value.splice(index, 1);
}
});
}
};
// 全選,取消全選
function handleAllChange(val) {
// 翻頁時(shí)會(huì)把已經(jīng)選擇的回顯在val,造成不能區(qū)分在本頁到底是全選確定還是取消全選
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);
}
});
});
}
};
// 公共標(biāo)簽刪除
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('標(biāo)簽不在本頁，無法刪除!!!')
}
});
};
/**
* 提交
*/
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>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3.0關(guān)閉eslint校驗(yàn)的3種方法詳解
這篇文章主要給大家介紹了關(guān)于vue3.0關(guān)閉eslint校驗(yàn)的3種方法,在實(shí)際開發(fā)過程中,eslint的作用不可估量,文中將關(guān)閉的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
非Vuex實(shí)現(xiàn)的登錄狀態(tài)判斷封裝實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于非Vuex實(shí)現(xiàn)的登錄狀態(tài)判斷封裝的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
Vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前行變色
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前行變色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
vue實(shí)現(xiàn)氣泡運(yùn)動(dòng)撞擊效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)氣泡運(yùn)動(dòng)撞擊效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
vue單頁應(yīng)用加百度統(tǒng)計(jì)代碼（親測(cè)有效）
這篇文章主要介紹了vue單頁應(yīng)用加百度統(tǒng)計(jì)代碼的解決方法，需要的朋友參考下吧2018-01-01
vant 時(shí)間選擇器--開始時(shí)間和結(jié)束時(shí)間實(shí)例
這篇文章主要介紹了vant 時(shí)間選擇器--開始時(shí)間和結(jié)束時(shí)間實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vuex實(shí)現(xiàn)及簡(jiǎn)略解析(小結(jié))
這篇文章主要介紹了vuex實(shí)現(xiàn)及簡(jiǎn)略解析(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
Vue 實(shí)現(xiàn)對(duì)quill-editor組件中的工具欄添加title
這篇文章主要介紹了Vue 實(shí)現(xiàn)對(duì)quill-editor組件中的工具欄添加title，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
使用vue實(shí)現(xiàn)通過變量動(dòng)態(tài)拼接url
這篇文章主要介紹了使用vue實(shí)現(xiàn)通過變量動(dòng)態(tài)拼接url，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue實(shí)現(xiàn)el-menu與el-tabs聯(lián)動(dòng)的項(xiàng)目實(shí)踐
本文講述了如何使用Vue.js中的ElementUI組件庫(kù)實(shí)現(xiàn)el-menu與el-tabs的聯(lián)動(dòng),通過在el-menu中選擇菜單項(xiàng),可以切換el-tabs的內(nèi)容區(qū)域,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11