vue element表格合并第一列,合并的行数=表格行数

心已赠人 2022-09-04 08:53 61阅读 0赞

<el-table
      :data="arr"
      :span-method="(({row, column, rowIndex, columnIndex})=>objectSpanMethod({row, column, rowIndex, columnIndex},arr))"
      border>
      <el-table-column prop="opinionType" width="110px" align="center">
        <template slot-scope="{row}">
          {
       {row.opinionType}}
        </template>
      </el-table-column>
      <el-table-column prop="title">
        <template slot-scope="{row}">
          {
       {getContent1(row.title)}}
        </template>
      </el-table-column>
      <el-table-column prop="content">
        <template slot-scope="{row}">
          <div :class="getClass1(row.auditStatus)">{
       {getContent1(row.content)}}</div>
        </template>
      </el-table-column>
    </el-table>

objectSpanMethod( {row, column, rowIndex, columnIndex} ,value) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: value.length,
            colspan: 1
          }
        }else{
            return {
              rowspan: 0,
              colspan: 0
            };
        }
      }
    }

效果图：后端传的是二维数组，所以这里解决方案是：每一维都用一个表格，第二维就是表格数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70][]

实际代码

<template v-for="data in groupData">
      <el-table
              :data="data.arr"
              :span-method="(({row, column, rowIndex, columnIndex})=>objectSpanMethod({row, column, rowIndex, columnIndex},data.arr))"
              border
              :show-header="false"
              style="width: 100%;border-top: 0px">
        <el-table-column prop="opinionType" width="110px" align="center">
          <template slot-scope="{row}">
            {
       {row.opinionType}}
          </template>
        </el-table-column>
        <el-table-column prop="title"  width="160px" align="center">
          <template slot-scope="{row}">
            {
       {getContent1(row.title)}}
          </template>
        </el-table-column>
        <el-table-column prop="content" align="left">
          <template slot-scope="{row}">
            <div :class="getClass1(row.auditStatus)">{
       {getContent1(row.content)}}</div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    
    objectSpanMethod( {row, column, rowIndex, columnIndex} ,arr) {
        if (columnIndex === 0) {
          if (rowIndex === 0) {
            return {
              rowspan: arr.length,
              colspan: 1
            }
          }else{
              return {
                rowspan: 0,
                colspan: 0
              };
          }
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70]: /images/20220829/b466ef0e25e64ca3a4b919e2ee490ef1.png