el-table表格合并头，多级表头，合并列，合并列数据处理（2024-05-22）

宝子卡粉

已于 2024-05-22 09:18:41 修改

阅读量982

点赞数 13

分类专栏： element-ui 前端开发文章标签： vue.js elementui javascript

于 2024-05-22 08:30:00 首次发布

本文链接：https://blog.csdn.net/hap1994/article/details/139087653

版权

前端开发同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

element-ui

3 篇文章 0 订阅

订阅专栏

1、多级表头合并表头

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

<el-table-column>标签按照合并的层级放置标签即可实现，数据是正常的二维数据。

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column label="配送信息">
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column label="地址">
        <el-table-column
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="300">
        </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王胡',
          province: '上海',
          address: '上海市普陀区金沙江路',
        }, {
          date: '2016-05-02',
          name: '王胡',
          province: '上海',
          address: '上海市普陀区金沙江路',
        }, {
          date: '2016-05-04',
          name: '大可',
          province: '广州',
          address: '广州天河区黄埔大道112号',
        }, {
          date: '2016-05-04',
          name: '大可',
          province: '广州',
          address: '广州天河区黄埔大道112号',
        }]
      }
    }
  }
</script>

表头多级且合并

2、表数据合并列或者行数据

通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。

该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。

（1）合并行数据

<template>
  <el-table
    :data="tableData"
    :span-method="objectSpanMethod"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column label="配送信息">
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column label="地址">
        <el-table-column
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="300">
        </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王胡',
          province: '上海',
          address: '上海市普陀区金沙江路',
        }, {
          date: '2016-05-02',
          name: '王胡',
          province: '上海',
          address: '上海市普陀区金沙江路',
        }, {
          date: '2016-05-04',
          name: '大可',
          province: '广州',
          address: '广州天河区黄埔大道112号',
        }, {
          date: '2016-05-04',
          name: '大可',
          province: '广州',
          address: '广州天河区黄埔大道112号',
        }]
      };
    },
    methods: {
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        let filed = 'name',tableFiled = 'tableData'
        if (column.property === filed) {
          const prevRow = this[tableFiled][rowIndex - 1];
          if (prevRow && (row[filed] === prevRow[filed])) {
            return {
              rowspan: 0,
              colspan: 1
            };
          } else {
            let rowspan = 1;
            for (let i = rowIndex + 1; i < this[tableFiled].length; i++) {
              if (this[tableFiled][i][filed] === row[filed]) {
                rowspan++;
              } else {
                break;
              }
            }
            return {
              rowspan,
              colspan: 1
            };
          }
        }
      },

    }
  }
</script>

（2）合并列数据

<template>
  <el-table
    :data="tableData"
    :span-method="arraySpanMethod"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column label="配送信息">
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column label="地址">
        <el-table-column
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="300">
        </el-table-column>
        <el-table-column
          prop="address"
          label="电话"
          width="300">
        </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王胡',
          phone: '15526445588',
          province: '上海',
          address: '上海市普陀区金沙江路',
        }, {
          date: '2016-05-02',
          name: '王胡',
          phone: '15526445588',
          province: '上海',
          address: '上海市普陀区金沙江路',
        }, {
          date: '2016-05-04',
          name: '大可',
          phone: '18855426782',
          province: '广州',
          address: '广州天河区黄埔大道112号',
        }, {
          date: '2016-05-04',
          name: '大可',
          phone: '18855426782',
          province: '广州',
          address: '广州天河区黄埔大道112号',
        }]
      };
    },
    methods: {
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) { // 用于设置合并开始的行号, 只要找到开始合并的行，在返回值当中，返回合并的行的数量，并且利用最后一个else，返回return {rowspan: 0, colspan: 0}，就能够完成我们合并行的需求。
          if (columnIndex === 0) {
            return {
              rowspan: 1, //自定义行数， 1行
              colspan: 1  //自定义列数   第0列开始1列 【0】
            };
          } else if (columnIndex === 1) {
            return {
              //不做操作
              rowspan: 1,  // 1行
              colspan: 1   // 第1列开始1列  【1】
            };
          }else if (columnIndex === 2) {
            return {
              //不做操作
              rowspan: 1,  // 1行
              colspan: 2   // 第2列开始合并2列 【2,3】
            };
          }else if (columnIndex === 4) {
            return {
              //不做操作
              rowspan: 1,  // 1行
              colspan: 1   // 第4列开始1列 【4】
            };
          }else{
            return {
              //不做操作
              rowspan: 1, 
              colspan: 0
            };
          }
        }
      },

    }
  }
</script>

解析：if (rowIndex === 1) {

用于设置合并开始的行号, 只要找到开始合并的行，在返回值当中，返回合并的行的数量，并且利用最后一个else，返回return {rowspan: 0, colspan: 0}，就能够完成我们合并行的需求。

方法中 if 所要判断的是仅仅是从哪一行开始合并，然和返回结果为合并多少行、多少列。