zoukankan      html  css  js  c++  java
  • 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('连接服务器失败'););
     

    最终:

  • 相关阅读:
    jenkins, docker-composer
    php pass-by-reference deprecated &$-->$
    showslow / YSlow for PhantomJS/slimerjs(gecko)/phantomas
    FW qunit introduction
    FW: AMD, CMD, CommonJS和UMD
    nodejs unit test related----faker-cli, sinonjs, mock/stub
    cs api测试
    CloudStack 4.3功能前瞻
    devcloud
    DevCloud for CloudStack Development
  • 原文地址:https://www.cnblogs.com/FanAspx/p/13032233.html
Copyright © 2011-2022 走看看