用map实现el-table全选

devtools/2024/10/19 18:37:28/
  <el-button size="small"   type="primary" @click="searchProxy">查询</el-button><el-checkbox v-model="selectAll"  @change="changeSelectAll" >全选</el-checkbox><el-table:data="taskList"v-loading="loading"style="width: 100%;"header-align="left"align="left"@select="handleSelectionChange"@select-all="handleSelectAll"ref="multipleTable"height="100%"><el-table-columnv-hasPermission="$auth.call_task_transfer":selectable="canSelect"type="selection"width="55"></el-table-column></ai-table>async search() {try {this.loading = true;const searchKey = this.searchKey;const status = this.curstatus;let lg = this.taskList.length;let {customerExecStatus,exportTime} = this.formlet exportStartTime = ''let exportEndTime = ''if(customerExecStatus==-1){customerExecStatus=""}if(exportTime && exportTime.length==2){exportStartTime =  this.$utils.formatDate(exportTime[0], 'yyyy-MM-dd')exportEndTime =  this.$utils.formatDate(exportTime[1], 'yyyy-MM-dd')}const data = {searchKey: encodeURI(searchKey),pageNum: this.paging.pageIndex,pageSize: this.paging.pageSize,execStatus: this.execStatus,limitId: this.paging.pageIndex > 1 ? this.taskList[lg - 1].id : 0,...this.form,exportStartTime,exportEndTime,customerExecStatus,};if (status !== 0) {data.callResult = status;}this.getExportUrl(data);const res = await this.$axios.proxy({url: API.setting.outboundTask.customerList.replace('{id}', this.id),query: data,root: 'speech',method: 'get',})if (res.code !== API.code.OK) {throw  res.message}const list = res.data.list || [];this.taskList = list;this.paging.total = res.data.total;this.totalNum = res.data.total;this.$nextTick(() => {this.taskList.forEach(item => {if(this.selectedArrMap.has(item.phoneNumber)){this.$refs.multipleTable.toggleRowSelection(item, true);}})});} catch (e) {this.$Notify({title: '提示',message: e,type: 'error',})} finally {this.loading = false}},
searchProxy() {this.paging.pageIndex = 1;this.selectedArr = []this.$nextTick(() => {this.taskList.forEach(item => {this.$refs.multipleTable.toggleRowSelection(item, false);})});this.search();},// 是否能够选中canSelect(row, index) {return  !this.selectAll && row.execStatusCode == 0},// 单选handleSelectionChange(selection, row) {// 处理选中取消条数const selected = selection.length && selection.indexOf(row) !== -1;if (!selected) {const res = this.selectedArr.findIndex(// item => item.taskCustomerId == row.taskCustomerIditem => item.phoneNumber == row.phoneNumber);this.selectedArr.splice(res, 1);} else {this.selectedArr.push(row);}},// 全选handleSelectAll(rows) {// 当前页全选if (rows.length) {rows.forEach(row => {// 如果在回显数据里没有匹配到对应客群id 则push到已选数组里if (!this.selectedArr.find(// item => item.taskCustomerId == row.taskCustomerIditem => item.phoneNumber == row.phoneNumber)) {this.selectedArr.push(row);}});} else {// 当前页反选// 当前页所有数据过滤返回给已选数组里(筛除当前页数据)const _arr = []this.taskList.forEach(row => {// _arr.push(row.taskCustomerId)_arr.push(row.phoneNumber)});this.selectedArr = this.selectedArr.filter(// item => !_arr.includes(item.taskCustomerId)item => !_arr.includes(item.phoneNumber));}},changeSelectAll(val){if(!val){this.selectedArr = []  this.$nextTick(() => {this.taskList.forEach(item => {this.$refs.multipleTable.toggleRowSelection(item, false);})});}},computed: {// 已选多少条selectedTotal() {if(this.selectAll){return this.totalNum}return this.selectedArr.length || 0},selectedArrMap() {const _map = new Map()this.selectedArr.forEach(item => {// _map.set(item.taskCustomerId, item)_map.set(item.phoneNumber, item)})return _map},fieldsColumn(){let result = []if(this.column==2){result = [{label:'金额',key:'money',},{label:'期数',key:'periods',}]}return  result},},

http://www.ppmy.cn/devtools/127075.html

相关文章

什么是回调地狱,如何避免?

概念 回调地狱&#xff08;Callback Hell&#xff09;&#xff0c;也称为金字塔之痛&#xff08;Pyramid of Doom&#xff09;&#xff0c;指的是在 JavaScript 中处理多个嵌套异步操作时&#xff0c;由于回调函数的层层嵌套而导致的代码结构复杂且难以阅读的情况。 回调地狱…

【C语言】指针与函数:传值与传址

函数在使用的时候&#xff0c;给到的形式参数属于局部变量&#xff0c;仅在函数体内部有效。 传值&#xff0c;对于两个值的交换&#xff0c;不影响函数调用之前的数值&#xff0c;也就是不会改变main函数或其他函数中的值。这个就是传值&#xff0c;传递的是实参。传址&#…

985研一学习日记 - 2024.10.16

一个人内耗&#xff0c;说明他活在过去&#xff1b;一个人焦虑&#xff0c;说明他活在未来。只有当一个人平静时&#xff0c;他才活在现在。 日常 1、起床6:00√ 2、健身1个多小时 今天练了二头和背部&#xff0c;明天练胸和三头 3、LeetCode刷了3题 旋转图像&#xff1a…

单片机探秘:从理论到应用

单片机探秘:从理论到应用 在这个科技飞速发展的时代,单片机的应用如同一颗璀璨的星星,照亮了我们生活的方方面面。今天,让我们一同深入探讨单片机的原理与应用,揭开这个技术领域的神秘面纱。 1. 单片机概述 1.1 什么是单片机 你可曾想过,生活中很多自动化设备是如何工…

FreeRTOS:任务通知

目录 一、简介 二、相关API 1.发送任务通知的API 2.获取任务通知的API 三、使用场景 1.代替消息队列 2.代替二值信号量 3.代替计数信号量 4.代替事件组 一、简介 FreeRTOS的任务通知&#xff08;Task Notifications&#xff09;是一个轻量级、快速的机制&#xff0c;用于…

Java @RequestPart注解:同时实现文件上传与JSON对象传参

RequestPart注解&#xff1a;用于处理multipart/form-data请求的一部分&#xff0c;通常用于文件上传或者处理表单中的字段。 java后端举例&#xff1a; PostMapping("/fileTest")public AjaxResult fileTest(RequestPart("file") MultipartFile file,Req…

机器人的应用 基于5G的变电站智慧管控系统

背景概述 一、电力行业面临的挑战与变革 随着全球工业化和信息化的快速发展&#xff0c;电力行业作为国民经济的基础性行业&#xff0c;其重要性日益凸显。然而&#xff0c;随着电力网络的不断扩展和复杂化&#xff0c;变电站和开关站作为电力传输与分配的关键节点&#xff0…

【设计模式】Python 设计模式之建造者模式(Builder Pattern)详解

Python 设计模式之建造者模式&#xff08;Builder Pattern&#xff09;详解 在软件开发中&#xff0c;创建复杂对象往往需要多个步骤&#xff0c;而这些步骤之间的顺序、配置可能有多种变化。为了解决这个问题&#xff0c;建造者模式&#xff08;Builder Pattern&#xff09;应…