el-table合并单元格-会超出表格内容问题

需求,合并第一行,前三列

<template>
  <div>
    <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
      <el-table-column prop="id" label="ID" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="amount1" label="数值 1(元)">
      </el-table-column>
      <el-table-column prop="amount2" label="数值 2(元)">
      </el-table-column>
      <el-table-column prop="amount3" label="数值 3(元)">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: '12987122',
        name: '王小虎',
        amount1: '234',
        amount2: '测试1',
        amount3: "测试2"
      }, {
        id: '12987123',
        name: '王小虎',
        amount1: '165',
        amount2: '4.43',
        amount3: 12
      }, {
        id: '12987124',
        name: '王小虎',
        amount1: '324',
        amount2: '1.9',
        amount3: 9
      }, {
        id: '12987125',
        name: '王小虎',
        amount1: '621',
        amount2: '2.2',
        amount3: 17
      }, {
        id: '12987126',
        name: '王小虎',
        amount1: '539',
        amount2: '4.1',
        amount3: 15
      }]
    };
  },
  methods: {
    //需求,合并第一行,前三列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  
      if (rowIndex === 0 && columnIndex === 0) {
        return {
          rowspan: 1, //第0行
          colspan: 3  //第0列
        };

      }
      if (rowIndex === 0 && columnIndex === 1) {
        return {
          rowspan: 0, //第0行
          colspan: 0  //第1列
        };

      }
      if (rowIndex === 0 && columnIndex === 2) {
        return {
          rowspan: 0, //第0行
          colspan: 0  //第2列
        };

      }
    }
  }
};
</script>

关键代码

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  
      if (rowIndex === 0 && columnIndex === 0) {
        return {
          rowspan: 1, //第0行
          colspan: 3  //第0列
        };

      }
      if (rowIndex === 0 && columnIndex === 1) {
        return {
          rowspan: 0, //第0行
          colspan: 0  //第1列
        };

      }
      if (rowIndex === 0 && columnIndex === 2) {
        return {
          rowspan: 0, //第0行
          colspan: 0  //第2列
        };

      }
    }

等同于


if (rowIndex === 0) {
        if (columnIndex === 0) {
          return {
            rowspan: 1, //第一行
            colspan: 3  //合并三列
          };
        } else if (columnIndex < 3) {
          //代表,第一行第二列,第一行第三列   需要处理
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }

出现超出行的表格问题,是因为你合并了代码,就需要把被合并放表格进行处理

你可能感兴趣的:(组件库,vue.js,前端,javascript)