有这样一个需求之vue项目中表格合并行或列

前言

开发过程中不可避免的会有需要合并表格行或列的需求，在这里记录一下代码，方便搬运，做一名合格的搬运工。

原结构

期望效果

Template

<template>
  <!-- 表格行列转换 -->
  <el-table
    ref="table"
    :data="getTableData"
    style="width: 100%;margin:10px 0;"
    :span-method="objectSpanMethod"
  >
    <template v-for="(item, index) in headerList">
      <el-table-column
        :key="index"
        :label="item.unit ? `${item.label}（${item.unit}）` : item.label"
        :prop="item.value"
        :header-align="item.headerAlign || 'center'"
        :min-width="item.minWidth || 80"
        :align="item.align || 'center'"
      >
        <template slot-scope="scope">
          {{ tableFormatter(item.value, scope.row) }}
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

JavaScript

<script>
import { TABLE_HEADER } from '@/config/index.js';

export default {
  data() {
    return {
      headerList: TABLE_HEADER,
      tableData: [
        {
          class: '九年级1班',
          name: '张三',
          grade: '80'
        },
        {
          class: '九年级1班',
          name: '李四',
          grade: '85'
        },
        {
          class: '九年级1班',
          name: '赵五',
          grade: '86'
        },
        {
          class: '九年级2班',
          name: '风儿',
          grade: '99'
        },
        {
          class: '九年级2班',
          name: '雄霸',
          grade: '120'
        },
        {
          class: '九年级3班',
          name: '云儿',
          grade: '113'
        }
      ]
    };
  },
  computed: {
    getTableData() {
      return this.tableDataFormatter(this.tableData);
    }
  },
  methods: {
    // 处理列表，用来计算需要合并行或列的条数
    tableDataFormatter(data = []) {
      data.sort((a, b) => {
        return a.class - b.class;
      });
      const obj = {};
      const list = data.map((item) => {
        const key = `${item.class}`;
        const newItem = {
          ...item
        };
        if (obj[key]) {
          newItem.firstHebing = 0;
        } else {
          const length = data.filter((ele) => ele.class === item.class).length;
          newItem.firstHebing = length;
          obj[key] = length;
        }
        return newItem;
      });
      return list;
    },
    // 合并行或列的计算方法 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (row.firstHebing > 0) {
          return {
            rowspan: row.firstHebing,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    // 列表格式化
    tableFormatter(prop, row) {
      if (row[prop] === null || row[prop] === undefined) {
        return '--';
      }
      return row[prop];
    }
  }
};
</script>

// config.js 用来存储表格头
const TABLE_HEADER = [
  {
    label: '班级',
    value: 'class',
    unit: '',
    headerAlign: 'center',
    minWidth: '110',
    align: 'center'
  },
  {
    label: '姓名',
    value: 'name',
    unit: '',
    headerAlign: 'center',
    minWidth: '80',
    align: 'center'
  },
  {
    label: '成绩',
    value: 'grade',
    unit: '分',
    headerAlign: 'center',
    minWidth: '90',
    align: 'center'
  }
];

export { TABLE_HEADER };

参考

• #

补充

感觉代码还是有点啰嗦，以后想到更好的方式了及时修改。
如果大家还有其他想法可以提出来，一起提升，感激不尽。

最后

• 文章是自己手敲，是对工作日常的总结，如有错误之处，敬请指正
• 如果遇到什么问题就留言吧，能解决大家帮忙一起解决一下