快捷導(dǎo)航

vue3+elementui plus如何實現(xiàn)多選分頁列表的新增和修改

更新時間：2025年06月18日 08:41:36 作者：阿飛920

這篇文章主要介紹了vue3+elementui plus如何實現(xiàn)多選分頁列表的新增和修改問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

業(yè)務(wù)需要實現(xiàn)這樣的一個需求，要求添加標簽時打開一個彈框（彈框如下頁面）常規(guī)的一般是列表一頁展示完，進行多選，這個比較簡單些，但是有一個弊端數(shù)據(jù)量大的情況下，要么借助插件實現(xiàn)虛擬加載，（虛擬加載請百度搜索vxe-table插件）要么分頁進行，此文檔說的就是分頁。

遇到的問題

1.分頁回顯問題

借助 reserve-selection=“true” 頁面刷新的時候進行保留所選項目，必須要有row-key 才能生效。

2.開始使用selection-change方法

進行動態(tài)數(shù)據(jù)收集，會遇到頁面一進去就執(zhí)行的問題，后來替換 @select=“handleSelectionChange” @select-all=“handleAllChange” 單選，全選解決。

3.全選選擇和取消區(qū)分不清的問題

只要翻頁，其他頁碼已經(jīng)選擇的標簽，再切換第一頁全選handleAllChange時，參數(shù)就帶有其他頁碼的選項，需要特殊處理，不然的話selecteds.length > 0一直是true,可能還有比我更好的辦法，我暫時只是拿本頁數(shù)據(jù)過濾掉了。

4.打開頁面沒有選中

全部請求數(shù)據(jù)進行選中不太顯示，需要每次翻頁手動選中即可。

<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="命中人數(shù)"></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，也可以是你自己數(shù)據(jù)源中的其他某個代表唯一的字段
  return row.crowdNo
}
const searchParams = reactive({
  crowdName: null,
  pageIndex: 1,
  pageSize: 10,
  crowdType: '1',
  excludeCrowd: route.query.crowdNo,
});
// 數(shù)組對象去重
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)選擇的公共標簽值
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();
};
/**
 * 獲取人群標簽列表
 */
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è)置人群標簽列表默認值
 */
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ù)里沒有本條，把這條加進來(選中)
    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) {
  // 翻頁時會把已經(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);
        }
      });
    });
  }
};
// 公共標簽刪除
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>