0


element ui中el-table的合并相同列内容的解决方法,简单实用

element ui中el-table的合并相同列内容的解决方法,简单实用 废话不说,直接上代码,vue页面中的几个部分如下: 注意几点:

1、el-table中 写上: :span-method=“objectSpanMethod”
2、两个方法不用改动
3、想合并哪列,在data中columnArr数组里填上列名。
4、如果有bug,自己去调整吧

<template><div><el-table
      :data="tableData"
      style="width: 100%":cell-style="{ 'text-align': 'center' }":header-cell-style="{'text-align':'center',background:'#f6f8fa',color:'#333',}"
      border
      show-summary
      :span-method="objectSpanMethod"><el-table-column label="行号" type="index" width="60"></el-table-column><el-table-column prop="dotime" label="日期" min-width="110"></el-table-column><el-table-column prop="company_name" label="客户名称" min-width="160"></el-table-column><el-table-column prop="title" label="跟进标题" min-width="130"></el-table-column><el-table-column prop="income" label="收入" min-width="100"></el-table-column><el-table-column prop="cost" label="支出" min-width="100"></el-table-column><el-table-column prop="user_name" label="经办人" min-width="110"></el-table-column></el-table></div></template><script>exportdefault{name:"index",props:{},data(){return{tableData:[],//主数据//合并表格columnArr:["","dotime","company_name"],spanArr:[],//临时组spanData:[],// 组合的合并组};},methods:{//获取代理记账的业务getDataAccount(obj){this.$api
        .post("/xxx/xxx",{uid:this.$store.state.user.user_id,
          obj,}).then((res)=>{this.tableData = res.data;this.getSpanData(this.tableData);//计算需合并的内容});},// 计算需要合并的单元格getSpanData(data){this.spanData =[];this.columnArr.forEach((element)=>{let contactDot =0;this.spanArr =[];
        data.forEach((item, index)=>{if(index ===0){this.spanArr.push(1);}else{if(item[element]=== data[index -1][element]){this.spanArr[contactDot]+=1;this.spanArr.push(0);}else{
              contactDot = index;this.spanArr.push(1);}}});this.spanData.push(this.spanArr);});},objectSpanMethod({ row, column, rowIndex, columnIndex }){if(this.columnArr.includes(column.property)){if(this.spanData[columnIndex][rowIndex]){return{rowspan:this.spanData[columnIndex][rowIndex],colspan:1,};}else{return{rowspan:0,colspan:0,};}}},},mounted(){this.getDataAccount();},};</script><style lang="scss" scoped>// scss</style>
  1. 完事

本文转载自: https://blog.csdn.net/fzlw000/article/details/127568026
版权归原作者 生活有味道 所有, 如有侵权,请联系我们删除。

“element ui中el-table的合并相同列内容的解决方法,简单实用”的评论:

还没有评论