element ui table表头合并

转载

mob64ca14085c24 2024-09-20 12:47:24

利用element-ui的表格实现复杂合并单元格

话不多说，先呈效果图

element ui table表头合并_数据

首先我们得先了解下请求回来的数据是否和我一致哦，不一致的话可能文章就对你没啥用啦,以下是请求回来的数据（数据有点多哈，主要让你们看看数据格式是否和我一样）

"list":[
{
"rowNum":null,
"industry":"SCBC",
"custCode":"001421",
"custname":"深圳软件科技有限公司",
"draftType":"1",
"draftTypeName":"银票-电票",
"lastBal":"0.00",
"curIncreased":"5,200,000.00",
"saEndorseLessen":"0.00",
"collectionLessen":"0.00",
"endorseLessen":"5,200,000.00",
"discountLessen":"0.00",
"curLessen":"5,200,000.00",
"curBal":"0.00"
},
{
"rowNum":null,
"industry":"SCBC",
"custCode":"001421",
"custname":"深圳软件科技有限公司",
"draftType":"4",
"draftTypeName":"合计",
"lastBal":"0.00",
"curIncreased":"5,200,000.00",
"saEndorseLessen":"0.00",
"collectionLessen":"0.00",
"endorseLessen":"5,200,000.00",
"discountLessen":"0.00",
"curLessen":"5,200,000.00",
"curBal":"0.00"
},
{
"rowNum":null,
"industry":"SCBC",
"custCode":"001560",
"custname":"海外电子有限公司",
"draftType":"1",
"draftTypeName":"银票-电票",
"lastBal":"0.00",
"curIncreased":"4,053,269.00",
"saEndorseLessen":"0.00",
"collectionLessen":"5,926,320.41",
"endorseLessen":"1,586,395.00",
"discountLessen":"0.00",
"curLessen":"7,512,715.41",
"curBal":"5,849,311.00"
},
{
"rowNum":null,
"industry":"SCBC",
"custCode":"001560",
"custname":"海外电子有限公司",
"draftType":"4",
"draftTypeName":"合计",
"lastBal":"0.00",
"curIncreased":"4,053,269.00",
"saEndorseLessen":"0.00",
"collectionLessen":"5,926,320.41",
"endorseLessen":"1,586,395.00",
"discountLessen":"0.00",
"curLessen":"7,512,715.41",
"curBal":"5,849,311.00"
},
{
"rowNum":null,
"industry":"白电",
"custCode":"001353",
"custname":"家用电器有限公司",
"draftType":"1",
"draftTypeName":"银票-电票",
"lastBal":"0.00",
"curIncreased":"45,964,536.65",
"saEndorseLessen":"0.00",
"collectionLessen":"0.00",
"endorseLessen":"169,679,484.78",
"discountLessen":"0.00",
"curLessen":"169,679,484.78",
"curBal":"42,964,536.65"
},
{
"rowNum":null,
"industry":"白电",
"custCode":"001353",
"custname":"家用电器有限公司",
"draftType":"3",
"draftTypeName":"商票-T票通",
"lastBal":"0.00",
"curIncreased":"13,073,200.00",
"saEndorseLessen":"0.00",
"collectionLessen":"3,650,400.00",
"endorseLessen":"0.00",
"discountLessen":"0.00",
"curLessen":"3,650,400.00",
"curBal":"49,875,680.00"
},
{
"rowNum":null,
"industry":"白电",
"custCode":"001353",
"custname":"家用电器有限公司",
"draftType":"4",
"draftTypeName":"合计",
"lastBal":"0.00",
"curIncreased":"59,037,736.65",
"saEndorseLessen":"0.00",
"collectionLessen":"3,650,400.00",
"endorseLessen":"169,679,484.78",
"discountLessen":"0.00",
"curLessen":"173,329,884.78",
"curBal":"92,840,216.65"
},
{
"rowNum":null,
"industry":"白电",
"custCode":"001354",
"custname":"家用电器（合肥）有限公司",
"draftType":"1",
"draftTypeName":"银票-电票",
"lastBal":"0.00",
"curIncreased":"180,141,055.87",
"saEndorseLessen":"0.00",
"collectionLessen":"115,337.61",
"endorseLessen":"16,001,969.83",
"discountLessen":"113,258,142.22",
"curLessen":"129,375,449.66",
"curBal":"81,004,027.13"
},
{
"rowNum":null,
"industry":"白电",
"custCode":"001354",
"custname":"家用电器（合肥）有限公司",
"draftType":"2",
"draftTypeName":"商票-外部商票",
"lastBal":"0.00",
"curIncreased":"0.00",
"saEndorseLessen":"0.00",
"collectionLessen":"0.00",
"endorseLessen":"0.00",
"discountLessen":"0.00",
"curLessen":"0.00",
"curBal":"602,728.00"
},
{
"rowNum":null,
"industry":"白电",
"custCode":"001354",
"custname":"家用电器（合肥）有限公司",
"draftType":"3",
"draftTypeName":"商票-T票通",
"lastBal":"0.00",
"curIncreased":"20,271,290.98",
"saEndorseLessen":"0.00",
"collectionLessen":"15,453,326.83",
"endorseLessen":"1,364,560.00",
"discountLessen":"0.00",
"curLessen":"16,817,886.83",
"curBal":"113,413,717.06"
},
{
"rowNum":null,
"industry":"白电",
"custCode":"001354",
"custname":"家用电器（合肥）有限公司",
"draftType":"4",
"draftTypeName":"合计",
"lastBal":"0.00",
"curIncreased":"200,412,346.85",
"saEndorseLessen":"0.00",
"collectionLessen":"15,568,664.44",
"endorseLessen":"17,366,529.83",
"discountLessen":"113,258,142.22",
"curLessen":"146,193,336.49",
"curBal":"195,020,472.19"
}]

如果你看到这里你还打算往下看的话，恭喜你可以直接照搬我的方法啦(文件路径，请求路径，请求之类的记得自己改一下哦)
1.新建一个js文件并引入到main.js中
js文件

//头部颜色
const headerColor = function(rowIndex) {
    if (rowIndex === 0) {
      return { background: "#e92323", color: "#fff" };
    } else {
      return { background: "#133890", color: "#fff" };
    }
  }
//斑马条纹（bg和bgnone为类名，可以在类名写样式）
const tableRowClassName = function(rowIndex) {
    if (rowIndex % 2 === 0) {
      return "bg";
    } else {
      return "bgnone";
    }
  }
//转化下请求回来的数据
const listHandle = function(list) {
  for (var key in list[0]) {
    var k = 0;
    var j = 0;
    while (k < list.length) {
      list[k][key + "count"] = 1;
      list[k][key + 'number'] = j;
      for (var i = k + 1; i <= list.length - 1; i++) {
        if (list[k][key] == list[i][key] && list[k][key] != "") {
          list[k][key + "count"]++;
          list[i][key + "count"] = 0;
          list[i][key + 'number'] = j;
        } else {
          break;
        }
      }
      j++
      k = i;
    }
  }
  return list;
}

  export {
    headerColor,
    tableRowClassName,
    listHandle
 
  }

2.将以上的js文件引入main.js

import {headerColor，tableRowClassName,listHandle} from “js文件的路径”
Vue.prototype.$headerColor = headerColor
Vue.prototype.$tableRowClassName = tableRowClassName
Vue.prototype.$listHandle = listHandle

3.在vue文件中使用过
vue文件

</template>
     <el-table
          :data="tableList"
          class="table_content"
          height="calc(100% - 30px)"
          border
          :row-class-name="tableRowClassName"
          :span-method="objectSpanMethod"
          :header-cell-style="headerColor"
          style="width: 100%"
        >
          <el-table-column
            label="产业"
            width="97"
            prop="industry"
            :show-overflow-tooltip="true"
            align="center"
          >
          	//产业这里使用了插槽是为了加背景色（由于合并表格以后表格斑马纹颜色会发生错乱，只能加个div覆盖错乱的颜色，不需要可去掉）
            <template slot-scope="scope">
              <div
                :style="
                  'height:' +
                  scope.row.industrycount * 40 +
                  'px;line-height:' +
                  scope.row.industrycount * 40 +
                  'px'
                "
                :class="
                  scope.row.industrynumber % 2 === 0
                    ? 'blue text_ellipsis'
                    : 'white text_ellipsis'
                "
              >
                {{ scope.row.industry }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="custname"
            label="法人"
            :show-overflow-tooltip="true"
            width="360"
          >
          //法人同产业使用插槽原因一样
            <template slot-scope="scope">
              <div
                :style="
                  'height:' +
                  scope.row.custnamecount * 40 +
                  'px;line-height:' +
                  scope.row.custnamecount * 40 +
                  'px'
                "
                :class="
                  scope.row.custnamenumber % 2 === 0
                    ? 'white text_ellipsis'
                    : 'blue text_ellipsis'
                "
              >
                {{ scope.row.custname }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            width="140"
            :show-overflow-tooltip="true"
            prop="draftTypeName"
            align="center"
            label="票据类型"
          >
          </el-table-column>
          <el-table-column
            prop="lastBal"
            width="140"
            align="center"
            :show-overflow-tooltip="true"
            label="上月余额"
          >
          </el-table-column>
          <el-table-column
            prop="curIncreased"
            width="140"
            align="right"
            :show-overflow-tooltip="true"
            label="本月新增"
          >
          </el-table-column>
         <el-table-column label="本月减少" align="center">
            <el-table-column
              width="150"
              :show-overflow-tooltip="true"
              align="right"
              prop="saEndorseLessen"
              label="质押"
            >
            </el-table-column>
            <el-table-column
              width="150"
              :show-overflow-tooltip="true"
              align="right"
              prop="collectionLessen"
              label="到期托收"
            >
            </el-table-column>
            <el-table-column
              width="150"
              :show-overflow-tooltip="true"
              align="right"
              prop="endorseLessen"
              label="背书"
            >
            </el-table-column>
            <el-table-column
              width="150"
              :show-overflow-tooltip="true"
              align="right"
              prop="discountLessen"
              label="贴现"
            >
            </el-table-column>
            <el-table-column
              width="150"
              :show-overflow-tooltip="true"
              align="right"
              prop="curLessen"
              label="合计"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column
            width="174"
            :show-overflow-tooltip="true"
            align="right"
            prop="curBal"
            label="本月余额"
          >
          </el-table-column>
    </el-table>
</template>

<script>
export default {
data () {
    return {
           tableList:[],
    };
  },
created(){
     axios({
	url:'请求数据的地址'，
	method：'get',
     }).then(res=>{
	this.tableList = this.$listHandle(res.data.dat.list)
     })
}

     //合并单元格（此方法需要结合this.$listHandle(res.data.dat.list)处理过的数据）
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
     //找到第一列
      if (columnIndex === 0) {
         //industrycount是需要合并的字段（这里第一列合并的字段是industrycount，industrycount是经过this.$listHandle处理过的数据，是SCBC的合并的个数）
        //如果合并的个数大于1的话
        if (row.industrycount > 1) {
          return {
            rowspan: row.industrycount,
            colspan: 1,
          };
        } else if(row.industrycount === 1){
          return {
            rowspan: 1,
            colspan: 1,
          };
        }else{
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
     //第二列与第一列同理
      if (columnIndex === 1) {
        if (row.custnamecount > 1) {
          return {
            rowspan: row.custnamecount,
            colspan: 1,
          };
        } else if (row.custnamecount === 1) {
          return {
            rowspan: 1,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
//表格头部颜色
headerColor({ rowIndex, columnIndex }) {
      return this.$headerColor(rowIndex);
    },
//改变合计那一行的背景色
tableRowClassName({ row, rowIndex }) {
      if (row.draftTypeName == "合计") {
        return "hang";
      }
      return this.$tableRowClassName(rowIndex);
    },

}
</script>

<style scoped lang="scss">
::v-deep .hang {
  background: #cff39d;
  font-weight: bold;
}
.blue {
  background: #d5dffc;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}
.white {
  background: #fff;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;

}
</style>

注：经过this.$listHandle()处理的数据，第一条数据的SCBC的industrycount是计算出SCBC合并的个数，第二条数据后的SCBC的industrycount都为0，至于为什么要这样处理数据呢，那是因为element表格的 return { rowspan: 0,colspan: 0, }表示隐藏该单元格，return { rowspan: 1,colspan: 1, }表示合并一行一列
（刚接触写文章，写的有些烂，语言组织方面可能也有些问题，大家莫怪哈）

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。