• antd-vue-table 合并相同单元格记录


    var spanArr=[];
    var position=0;
    
    //列合并
    const renderContent = (value, row, index) => {
      const obj = {
        children: value,
        attrs: {}
      };
      const _row = spanArr[index];
      const _col = _row> 0 ? 1 : 0;
             obj.attrs = {
                    rowSpan: _row,
                    colSpan: _col
        };
    
      return obj;
    };
    
    //计算合并 const rowspan
    = (userData)=>{ spanArr=[]; position=0; userData.forEach((item,index) => { if(index === 0){ spanArr.push(1); position = 0; }else{
    //需要合并的地方判断
    if(userData[index].CheckItem === userData[index-1].CheckItem ){ spanArr[position] += 1; spanArr.push(0); }else{ spanArr.push(1); position = index; } } }); } //列名 const columnsScore = [ { title: '编号', dataIndex: 'ScoreId', 80, }, { title: '检查项目', dataIndex: 'CheckItem', 100, customRender: renderContent }, { title: '检查内容', dataIndex: 'CheckContent', 130 }, { title: '操作', key: 'action', scopedSlots: { customRender: 'action' } } ]

    //请求table数据
          this.$axios({  method: "post", url: "/QuaLity/GetQuality",}).then(res => {
          this.dataSource=res.data.Data;
          rowspan(res.data.Data);
          }).catch(() => { this.$message.error('连接服务器失败'););
     

    最终:

  • 相关阅读:
    详解log4j2(下)
    linux编译相关知识
    vi/vim正则表达式
    红黑树学习
    转行做程序员之前必须考虑的三件事
    工作十年,你为什么依然没有成为专家
    __sync_fetch_and_add
    STL容器的本质
    学习hash_map从而了解如何写stl里面的hash函数和equal或者compare函数
    c++ union学习
  • 原文地址:https://www.cnblogs.com/FanAspx/p/13032233.html
Copyright © 2020-2023  润新知