首页 > 其他分享 >表格动态合并,序号连续

表格动态合并,序号连续

时间:2023-09-22 12:14:29浏览次数:43  
标签:rowspan obj 表格 item let key 序号 动态 newData

效果:

 <el-table
      :data="tableData"
      style="width: 100%"
      v-loading="tableDataLoading"
      :header-cell-style="{ background: '#FAFAFA' }"
      :span-method="objectSpanMethod"
    >
   <el-table-column prop="mergeKey" label="序号" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.mergeKey + 1 }}</span>
        </template>
      </el-table-column>
 </el-table>
import { resoveData,  filterTable, trainMerge, } from "@/utils/util.js";
methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if ([0, 1, 2, 12, 13, 14].includes(columnIndex)) {
        let _row = this.rowspan[rowIndex]; // 合并的行
        let _col = this.rowspan[rowIndex] > 0 ? 1 : 0; // 1是开头0是被合并
        return [_row, _col];
      }
    },
   getList() {
      this.tableDataLoading = true;
      let params = {
        pageNum: this.listQuery.pageNum,
        pageSize: this.listQuery.pageSize,
        ...this.listQuery, // 参数
      };
      continuousRecordsPage(params).then((res) => {
        this.tableData = res.data.records;
        let newData = resoveData(res.data.records, "filingInfos");
        this.tableData = filterTable(newData);
        console.log(this.tableData);
        this.rowspan = trainMerge(newData, "mergeKey"); // 获取相同类型合并列的数据
        console.log(this.rowspan);
        this.total = res.data.total;
        this.tableDataLoading = false;
      });
    },  
}
util.js

//  把数据合并了进行拆解arr=>后台数据;arrKey=>合并数据的key
   export function resoveData(arr, arrKey, mergeKey = "mergeKey") {
     let newData = [];
     arr.forEach((item, index) => {
       // newData.push(item);
       item[arrKey].forEach(el => {
         newData.push({
           ...el,
           ...item,
           [mergeKey]: index,
         })
       })
     })
     return newData
   }
   // 格式化表格null的数据为 -
   export function filterTable(data) {
     if (!data) return [];
     data.forEach(item => {
       for (let key in item) {
         if (item[key] == null || item[key] === '') item[key] = '-';
       }
     })
     return data;
   }
   // 传入element表格需要合并相同列的key返回合并行组成的Array
   export function trainMerge(arr, key) {
     let rowspan = [];
     var obj = {},
       k;
     for (var i = 0, len = arr.length; i < len; i++) {
       k = arr[i][key]; //需要合并的字段
       if (obj[k]) obj[k]++;
       else obj[k] = 1;
     }
     console.log('===', obj);
     //保存结果{el-'元素',count-出现次数}
     for (var o in obj) {
       for (let i = 0; i < obj[o]; i++) {
         if (i === 0) {
           rowspan.push(obj[o]);
         } else {
           rowspan.push(0);
         }
       }
     }
     return rowspan;
   }

 

标签:rowspan,obj,表格,item,let,key,序号,动态,newData
From: https://www.cnblogs.com/yjd-05/p/17721998.html

相关文章

  • 在选择屏幕中,根据按钮动态显示时,如果忘记写USER-COMMAND时会发生的问题
    顾问要求在,选择屏幕单据查询时显示成圈线和生产线选择框,在明细查询时隐藏,听需求是一个很简单的选择屏幕隐藏的功能,实现代码如下PARAMETERS:p_djRADIOBUTTONGROUPcxDEFAULT'X',"单据查询p_mxRADIOBUTTONGROUPcx."......
  • window和linux下有关xxx.dll和xxx.so动态库,可执行文件运行时的动态库检索路径文档
    没想到详细的内容都在库和命令的man手册中。ld.so动态库手册里有描述ELF可执行文件在运行时,都会在哪几个位置检索动态库。如果共享对象依赖项不包含斜杠,则它按以下顺序搜索:(1)使用二进制文件的DT_RPATH动态节属性中指定的目录(如果存在且DT_RUNPATH属性不存在)。不推荐......
  • Cygwin 编译的动态库文件.dll.a
    前提Cygwin编译OpenSSL出来的有两种文件:libcrypto.a和libcrypto.dll.a,VS编译调用没有问题,运行卡住,暂时未解决测试代码#include<openssl/evp.h>intmain(intargc,char*argv[]){ EVP_MD_CTX*mdctx; mdctx=EVP_MD_CTX_new(); EVP_MD_CTX_init(mdctx); EVP_DigestInit(m......
  • selenium自动化测试-获取动态页面小说
    有的网站页面是动态加载的资源,使用bs4库只能获取静态页面内容,无法获取动态页面内容,通过selenium自动化测试工具可以获取动态页面内容。参考之前的"bs4库爬取小说工具"文章代码,稍微修改下,就可以转成获取动态页面小说工具。第一步:先确定目标网址先找到小说目录页面。网址首页:'ht......
  • layui表格中关键字加粗加红显示
    使layui表格中根据关键词进行加红加粗显示,先看效果前台代码<scripttab="table处理及事件">vartable=layui.table;layui.use(['table'],function(){table.render({id:'ID-table-news',elem:'#ID-table-n......
  • win10操作系统动态链接库DLL文件搜索路径
    搜索可执行文件(xx.exe)同级目录下的其它DLL文件(不会搜索子文件夹)32位程序C:\Windows\System32操作系统当前用户或者系统用户Path环境变量中直接包含的文件夹(子文件夹中的DLL同样无法被搜索到,不是递归搜索)在终端执行D:\code>C:\Users\XXX\Desktop\新建文件夹\bb.......
  • 将Execl表格的数据导入数据库
    ///导入台区///</summary>///<paramname="savePath"></param>///<paramname="msg"></param>///<returns></returns>publicboolUpload(stringsavePath,outst......
  • el-table表格列宽度可拖拽及注意事项
    一、场景实现表格列宽度可拖拽二、方案查阅文档el-table增加border属性el-table-colunm增加resizeable属性即可实现三、问题1.如表格中有固定列,拖拽折行会导致错位解决方案:监听鼠标事件,通过doLayout重绘表格this.$nextTick(()=>{constheaderD......
  • 动态规划——悬线法
    动态规划——悬线法P4147玉蟾宫1//动态规划——悬线法2#include<iostream>3#include<cmath>4usingnamespacestd;5constintN=1010;6intn,m;7chara[N][N];8inth[N][N];//保存高度9intl[N][N],r[N][N];10intmain(){11cin>>n>>m;......
  • 6.3 应用动态内存补丁
    动态内存补丁可以理解为在程序运行时动态地修改程序的内存,在某些时候某些应用程序会带壳运行,而此类程序的机器码只有在内存中被展开时才可以被修改,而想要修改此类应用程序动态补丁将是一个不错的选择,动态补丁的原理是通过CreateProcess函数传递CREATE_SUSPENDED将程序运行起来并暂......