element-ui table :span-method（行合并）

柔情只为你懂 2022-03-09 05:30 294阅读 0赞

参考：[https://blog.csdn.net/qq\_29468573/article/details/80742646][https_blog.csdn.net_qq_29468573_article_details_80742646]

element-ui官网中关于行合并的例子是根据行号进行合并的，这显然不符合我们日常开发需求，因为通常我们table中的数据都是动态生成的，所以需要做一些修改。我们首先解读一下官网实例中的各参数的意义：

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {    //用于设置要合并的列
              if (rowIndex % 2 === 0) {   //用于设置合并开始的行号
                return {
                  rowspan: 2,　　　　　//合并的行数
                  colspan: 1          //合并的列数，设为０则直接不显示
                };
              } else {
                return {
                  rowspan: 0,
                  colspan: 0
                };
              }
            }
          }

研究这个例子后不难发现，实现合并行的方法其实在每一行数据渲染的时候都会执行，只不过在渲染过程中我们设置了它合并的行数和列数，以得到不同的效果。所以我们需要生成一个与行数相同的数组记录每一行设置的合并数。处理过程如下：

getSpanArr(data) {　
      for (var i = 0; i < data.length; i++) {
            if (i === 0) {
                  this.spanArr.push(1);
                  this.pos = 0
            } else {
              // 判断当前元素与上一个元素是否相同
        if (data[i].name === data[i - 1].name) {
                    this.spanArr[this.pos] += 1;
                    this.spanArr.push(0);
                  } else {
                    this.spanArr.push(1);
                    this.pos = i;
                  }
            }
        }
    },

data就是我们从后台拿到的数据，通常是一个数组；spanArr是一个空的数组，用于存放每一行记录的合并数；pos是spanArr的索引。上述代码意思是：如果是第一条记录（索引为０），向数组中加入１，并设置索引位置；如果不是第一条记录，则判断它与前一条记录是否相等，如果相等，则向spanArr中添入元素０，并将前一位元素＋１，表示合并行数＋１，以此往复，得到所有行的合并数，０即表示该行不显示。

cellMerge({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 0) {
                const _row = this.spanArr[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                      rowspan: _row,
                      colspan: _col
                }
          }
    },

然后根据得到的数组spanArr对表格进行合并渲染，并绑定合并方法

<el-table
          border
          :data="tableData"
          style="width: 100%;max-height: 160px;overflow: auto"
          :span-method="cellMerge">
        ......
    </el-table>

注：后台获取数据的时候根据要在前台进行合并的字段进行排序，使要合并的字段值相同的记录依次相邻。

**完整示例：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70][]

<el-table
          :data="tableData"
          :span-method="cellMerge"
          border
          style="width: 60%;">
          <el-table-column
            prop="id"
            label="商户ID">
          </el-table-column>
          <el-table-column
              prop="m_name"
              label="商户名称">
          </el-table-column>
          <el-table-column
            prop="name"
            label="产品名称">
          </el-table-column>
          <el-table-column
            prop="price"
            label="产品价格">
          </el-table-column>
        </el-table>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            tableData: [{
              id: '1',
              m_name: '白商户',
              name: '白1',
              price: '100'
            }, {
              id: '1',
              m_name: '白商户',
              name: '白2',
              price: '101'
            }, {
              id: '1',
              m_name: '白商户',
              name: '白3',
              price: '102'
            }, {
              id: '2',
              m_name: '黑商户',
              name: '黑1',
              price: '200'
            }, {
              id: '2',
              m_name: '黑商户',
              name: '黑2',
              price: '201'
            },{
              id: '3',
              m_name: '黄商户',
              name: '黄1',
              price: '30'
            }],
            spanArr: [],
            pos: '',
          }
        },
        created(){
          this.getSpanArr(this.tableData)
        },
        methods: {
          //需要生成一个与行数相同的数组记录每一行设置的合并数
          getSpanArr(data) {
            for (var i = 0; i < data.length; i++) {
              if (i === 0) {
                this.spanArr.push(1);
                this.pos = 0
              } else {
                // 判断当前元素与上一个元素是否相同
                if (data[i].id === data[i - 1].id) {
                  this.spanArr[this.pos] += 1;
                  this.spanArr.push(0);
                } else {
                  this.spanArr.push(1);
                  this.pos = i;
                }
              }
            }
          },
          cellMerge({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 || columnIndex === 1) {
              const _row = this.spanArr[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col
              }
            }
          }
        }
      })
    </script>

[https_blog.csdn.net_qq_29468573_article_details_80742646]: https://blog.csdn.net/qq_29468573/article/details/80742646
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70]: /images/20220309/797848400f6e4d49ba7a200939c8cc05.png