vue3+elementui plus 实现多选分页列表的新增和修改_element-plus 编辑修改列表

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317