element ui 表格列合并


          
          
          
          
        

的标签上,添加span-method方法

  computed: {
    gridData() {
      return [
        {
          name1:"失信被执行人",
          value1: this.dataTable.iname,
          name2:"法定代表人",
          value2: this.dataTable.businessentity
        },
        {
          name1:"身份号码/组织机构代码",
          value1: this.dataTable.cardnum,
          name2: "执行法院",
          value2: this.dataTable.courtname
        },
        {
          name1:"省份",
          value1: this.dataTable.areaname,
          name2: "执行依据文号",
          value2: this.dataTable.gistid
        },
        {
          name1:"立案时间",
          value1: this.dataTable.regdate,
          name2: "案号",
          value2: this.dataTable.casecode
        },
        {
          name1:"做出执行依据单位",
          value1: this.dataTable.gistunit,
          name2: "发布日期",
          value2: this.dataTable.publishdate
        },
        {
          name1:"生效法律文书确定的义务",
          value1: this.dataTable.duty,
        },
        {
          name1:"被执行人的履行情况",
          value1: this.dataTable.performance,
        },
        {
          name1:"失信被执行人为具体情形",
          value1: this.dataTable.disrupttypename,
        }]
    }
  },
 // 和并列
    addSpanMethod({ row, column, rowIndex, columnIndex }) {
     //从第几列开始合并,columnIndex就等于几(列数的索引值以0开始)
      if (columnIndex === 1) {
        //要合并的行数索引值
        if (rowIndex === 5 || rowIndex === 6 || rowIndex === 7) {
          //此处会由 横占一个单元格竖占三个单元格 合并成一个大的单元格
          return {
            rowspan: 1,
            colspan: 3
          };
        } else {
          //不满足条件的仍是,横竖各占一个的单元格
          return {
            rowspan: 1,
            colspan: 1
          };
        }
      }
    }

以上的效果,如图所示

element ui 表格列合并_第1张图片

 

你可能感兴趣的:(vue,element,ui,elementui)