Element-UI table span-method(行合并)的实现

最新推荐文章于 2024-05-24 11:40:21 发布

前端老混子

最新推荐文章于 2024-05-24 11:40:21 发布

阅读量8.1k

点赞数 5

分类专栏： Vue element-ui 文章标签： element-ui table span-method 动态合并行合并一列所有行

本文链接：https://blog.csdn.net/weixin_45544358/article/details/100154167

版权

Vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

element-ui

4 篇文章 0 订阅

订阅专栏

官网解释：通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。
这个显然不能满足项目开发需求，所以需要略作修改！

如下图，类似这样的合并应该才是工作中项目需要的：
在这里插入图片描述
实现方式（直接上代码）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>element-table</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.11.1/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.11.1/lib/index.js"></script>
  </head>
  <body>
    <div id="app">
      <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="姓名"
              width="180">
            </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>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data () {
          return {
            tableData: [{
              id: '12987122',
              name: '王小虎',
              amount1: '234',
              amount2: '3.2',
              amount3: 10
            }, {
              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
            }],
            mergeSpanArr: [], // 空数组，记录每一行的合并数
            mergeSpanArrIndex: '' // mergeSpanArr的索引
          }
        },
        methods: {
          objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) { // 设置需要合并的列（索引）
              if (rowIndex % 2 === 0) { // 设置合并多少行
                return {
                  rowspan: 2, // 需要合并的行数
                  colspan: 1 // 需要合并的列数，设置为0，不显示该列
                };
              } else {
                return {
                  rowspan: 0,
                  colspan: 0
                };
              }
            } else if (columnIndex === 1) { // 合并第二列所有行
              const _row = this.mergeSpanArr[rowIndex]
              const _col = _row > 0 ? 1 : 0
              return {
                rowspan: _row,
                colspan: _col
              }
            }
          },
          // 生成一个与行数相同的数组，记录每一行设置的合并数
          setMergeArr (data) {　
            for (var i = 0; i < data.length; i++) {
              if (i === 0) {
                this.mergeSpanArr.push(1);
                this.mergeSpanArrIndex = 0
              } else {
              // 判断当前元素与上一个元素是否相同
              if (data[i].name === data[i - 1].name) {
                  this.mergeSpanArr[this.mergeSpanArrIndex] += 1;
                  this.mergeSpanArr.push(0);
                } else {
                  this.mergeSpanArr.push(1);
                  this.mergeSpanArrIndex = i;
                }
              }
            }
            // 如果第一条记录索引为0，向数组中push 1，设置索引值
            // 如果不是第一条记录，判断与前一条记录是否相等，相等则向mergeSpanArr添加元素0
              // 且将前一条记录+1，即需要合并的行数+1，直到得到所有需要合并的行数
          }
        },
        mounted () {
          this.setMergeArr(this.tableData)
        }
      })
    </script>
  </body>
</html>