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.打开页面没有选中,全部请求数据进行选中不太显示,需要每次翻页手动选中即可。

elementui table 给每列值最小的做笔记_前端

<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>