element plus表格合并保留每一行的内容

所需要的页面

 表名，表头，注意表头也有合并现象

<el-form ref="formSearch" label-width="100px" style="background: #ffffff;">
    <el-row style="margin-left: 40px;">
      <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16" style="margin-left: 10px;">
        <el-button v-if="approveStatus" type="primary" @click="bankTargetEdit()">编辑</el-button>
        <el-button type="primary" @click="bankTargetDetail()">返回</el-button>
      </el-col>
    </el-row>
    <el-row>
      <h3 style="text-align: center">xxxx表</h3>
    </el-row>
   <!-- <el-row>
       <h4 style="margin: 5px 20px;text-align: right;">单位：xxxx</h4>
    </el-row> -->
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      :row-class-name="tableRowClassName"
      border
      height="600"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 98%; margin: 0px 20px"
    >
      <el-table-column v-for='(item,index) in titleData' :key='index' :prop='item.value' :label='item.name' :width="item.width" :align="item.align" header-align="center">
        <el-table-column v-for='(item1,index1) in item.children' :key='index1' :prop='item1.value' :label='item1.name' :width="item1.width" :align="item1.align" header-align="center">
        </el-table-column>
      </el-table-column>
    </el-table>
    <el-row style="margin: 5px 20px;text-align: left;">
      <h5>注：标“★”指标为监管评级用到的定量指标。</h5>
    </el-row>
  </el-form>
  <EditMonitorTargetDetail ref="EditMonitorTargetDetail" :monitorTargetDetail="monitorTargetDetail" :visib="dialogVisibleEditMonitorTargetDetail" @handleClose="dialogVisibleEditMonitorTargetDetail = false" @refreshList="refreshList" />
  </div>
</template>

<script>
import { bankMonitorTargetDetailList } from '@/api/bankMonitorTargetApprove.js'
import EditMonitorTargetDetail from "@/views/report/bankMonitorTarget/components/EditMonitorTargetDetail";

export default {
  name: 'ReportDataSource',
  components: {
    EditMonitorTargetDetail
  },
  data() {
    return {
      dialogVisibleEditMonitorTargetDetail : false,
      monitorTargetDetail:{},
      titleData:[],
      year: false,
      approveStatus: '',
      preYear: '',
      pre2Year: '',
      tableData: [],
      targetId: '',
      currentRow:''
    };
  },
  mounted() {
    this.queryList()
    this.titleData =
      [{
        name:'指标类型',
        value:'targetType',
        width:'100'
      },
      {
        name: 'xx',
        value:'frequency',
      },
      {
        name: '指标名称',
        value: 'date',
        children: [
          {
            name:'序号',
            value:'seq',
            width:'60',
            align:'center'
          },{
            name:'指标项',
            value:'targetName',
            width:'300'
          }
        ]
      },
      {
        name: 'xx',
        value:'currentPeriod',
      },{
        name:'xx',
        value:'lastPeriod',
      },{
        name: 'xx',
        value:'previousMonthGradation',
      },{
        name: 'xx',
        value:'initialValueOfTheYear',
      },{
        name: 'xx',
        value:'beginningYearInsert',
      },{
        name: 'xx',
        value:'formerYears',
      },{
        name: 'xx',
        value:'yearOnYearGradation',
      },{
        name: 'xx',
        value:'isArriveTarget',
      },{
        name: 'xx',
        value:'isFullMarks',
      },{
        name:'xx',
        value:'arriveTargetValue',
      },{
        name:'xx',
        value:'fullMarksValue',
      }
      ]
  },

  methods: {

    async queryList(){
      this.targetId = this.$route.query.targetId;
      this.year = this.$route.query.year;
      this.approveStatus = this.$route.query.approveStatus === 0;
      this.preYear = this.year -1;
      this.pre2Year = this.year -2;
      const {code, data} = await bankMonitorTargetDetailList(this.targetId);
      this.tableData = data;
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0 && columnIndex === 0) {
          return {
            rowspan: 3,
            colspan: 1
          };
        }if (rowIndex === 3 && columnIndex === 0) {
          return {
            rowspan: 24,
            colspan: 1
          };
        }
        if (rowIndex === 27 && columnIndex === 0) {
          return {
            rowspan: 10,
            colspan: 1
          };
        }
        if (rowIndex === 37 && columnIndex === 0) {
          return {
            rowspan: 10,
            colspan: 1
          };
        }
        if (rowIndex === 47 && columnIndex === 0) {
          return {
            rowspan: 3,
            colspan: 1
          };
        }
        if (rowIndex === 50 && columnIndex === 0) {
          return {
            rowspan: 1,
            colspan: 1
          };
        }
        if (rowIndex === 51 && columnIndex === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        }
        if (rowIndex === 55 && columnIndex === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        }
        else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      /* if(rowIndex === 1){
        if(columnIndex === 1){
          return{
            rowspan: 1,
            colspan: 2
          };
        }else if(columnIndex === 2 ){
          return{
            rowspan: 0,
            colspan: 0
          };
        }
      } */
    },

    tableRowClassName({row, rowIndex}) {
      if (row.importLevel === 2) {
        return 'warning-row';
      }
      if (row.importLevel === 3) {
        return 'success-row';
      }
      if (row.importLevel === 4) {
        return 'error-row';
      }
      return '';
    },

    handleCurrentChange(val) {
      this.currentRow = val;
    },

    bankTargetDetail(){
      this.$router.push({
        path: '/datarecord/bankMonitorTarget',
        query: {
          project: this.$store.state.user.project,
        },
      })
    },

    bankTargetEdit(){
      this.dialogVisibleEditMonitorTargetDetail = true
      const obj = {
        value: this.currentRow,
        year: this.year
      }
      this.$refs.EditMonitorTargetDetail.show(obj);
      this.$emit('handleCustomValue', obj)
    },

    refreshList(){
      window.location.reload()
    }
  }
};
</script>

注意上面的两个el-table-column是嵌套格式，通过嵌套的方式去遍历该表头下的子表头 ，然后就会实现上面的表格效果图，el-table有一个属性:span-method="objectSpanMethod"然后去写一个objectSpanMethod方法， 参数有四个{ row, column, rowIndex, columnIndex }，我这里需要的效果是只有第一列需要合并，所以if判断columnIndex === 0（0索引代表就是第一列）然后里面的if (rowIndex === 0 && columnIndex === 0)就是第一列第一行，然后返回值就是rowspan几行，colspan几列，我这里就只要把3行合并即可，所以rowspan就是3，colspan=1，然后就成了效果图那样，如果是列合并的话就是这样，之后就是你按照自己的格式自己定义就行 ，如果是行合并的话，我这里也写了一个注释 ，注释的那个就是行合并，首先定位到第二行，然后将第二，三列的单元合并，但是数据只要第二列的，如果你没有写取消第三列的数据，就会变成这样：

 

 就会发生数据错误，数据往后推迟了一列显示，等你加上排除的else if语句，效果是这样的

 

 只有第二列和第三行合并了，并且第三行数据清除了。所以说记得排除合并后的不需要数据列

行合并就这样做，这样行合并和列合并都讲完了。数据库是正常的，就像excel表格一样，一行一条数据，没有的值是空，像资本充足这样的，在数据库就是第一行有数据，第二行就是空，第三行也是空，这样你合并前三行，然后将第二行和第三行的数据排除，虽然本来就没数据，但是也要写排除语句，避免数据推迟一行显示。

数据库显示图

 如果你要做的是行合并和列合并都有，那么就要注意省略数据要写全，继续举例子

if(rowIndex === 1){
        if(columnIndex === 1){
          return{
            rowspan: 2,
            colspan: 2
          };
        }
        else if(columnIndex === 2 ){
          return{
            rowspan: 0,
            colspan: 0
          };
        }
      }else if(rowIndex === 2 && (columnIndex === 1 ||columnIndex === 2)){
        return{
          rowspan: 0,
          colspan: 0
        };
      }

你合并的就是两列两行，然后数据除了第一个单元格的数据，其余全部清除

效果如下

 这样就把原来的第二行的第二列和第三列和第三行的第二列和第三行都合并了，并且四个单元格的数据只保留一个单元数据，排除其余三个单元数据。

笔记记录一下，希望对你有所帮助