当前位置: 首页 > news >正文

用map实现el-table全选

  <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.lryc.cn/news/463640.html

相关文章:

  • 【开源免费】基于SpringBoot+Vue.JS社区团购系统(JAVA毕业设计)
  • Java进阶之路:构造方法
  • 2025秋招八股文--网络原理篇
  • C#基础-面向对象的七大设计原则
  • CSS 容器查询一探究竟
  • AI论文写作:如何轻松实现高原创度大揭秘
  • AtCoder Beginner Contest 375 A-E 题解
  • 其他-自己手动更换汽车电磁进排气阀0.9.2
  • 生成模型初认识
  • Java中的一些名词概念
  • 沈阳乐晟睿浩科技有限公司:引领抖音小店迈向新纪元
  • [图形学]蒙特卡洛积分方法介绍及其方差计算
  • 智慧社区Web解决方案:Spring Boot框架探索
  • 基于预测算法的航班离港延误系统
  • 【汇编语言】寄存器(内存访问)(七)—— CPU提供的栈机制
  • webAPI中的节点操作、高级事件
  • C++内存对齐机制简介
  • java集合进阶篇-《List集合》
  • FPGA图像处理之均值滤波
  • 高等数学 6.2 定积分在几何学上的应用
  • 缓存常见问题:缓存穿透、雪崩、击穿及解决方案分析
  • C++:拷贝构造
  • BGP(边界网关协议)
  • Spring 概念汇总
  • 快速在找到函数的实体的方法
  • 05 django管理系统 - 部门管理 - 修改部门
  • C++初阶——入门
  • Java基于SSM微信小程序物流仓库管理系统设计与实现(源码+lw+数据库+讲解等)
  • 82.【C语言】数据结构之顺序表的初始化和销毁
  • java-推荐一个控制台输出颜色ANSI字符的类