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

最新推荐文章于 2024-06-14 10:39:01 发布

知否灬知否

最新推荐文章于 2024-06-14 10:39:01 发布

阅读量558

点赞数 1

分类专栏：组件库文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_51958206/article/details/133273688

版权

组件库专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

<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
          };
        }
      }