有这样一个需求之vue项目中将表格行列互换

前言

在开发中有这样一个需求：我们需要将表格的行变成列，列变成行来展示，百度看了看此类相关的回答，有点少，遂自己写方法来实现。

要实现的效果如下图

• 原结构

• 目标结构

直接上代码！代码可直接搬运

Template

    <!-- 表格行列转换 -->
    <template>
        <el-table
          ref="table"
          :data="getTableData[0]"
          style="width: 100%;"
        >
          <template v-for="(item, index) in getTableData[1]">
            <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

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

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

export default {
  data() {
    return {
      headerList: TABLE_HEADER,
      tableData: [
        {
          class: '九年级1班',
          name: '张三',
          grade: '80'
        },
        {
          class: '九年级2班',
          name: '李四',
          grade: '85'
        },
        {
          class: '九年级2班',
          name: '风儿',
          grade: '99'
        },
        {
          class: '九年级3班',
          name: '云儿',
          grade: '113'
        }
      ]
    };
  },
  computed: {
    getTableData() {
      return this.fotmatterTableData(this.tableData, this.headerList);
    }
  },
  methods: {
    // 对 tableData 和 headerList 进行处理，关键代码
    fotmatterTableData(data, header) {
      let enddata = [];
      let endheader = [];
      header.forEach((item, index) => {
        if (index === 0) {
          endheader.push({
            label: header[index].label,
            value: 'mainIndex',
            unit: header[index].unit,
            headerAlign: header[index].headerAlign,
            minWidth: header[index].minWidth,
            align: header[index].align
          });
          data.forEach((ele, idx) => {
            endheader.push({
              label: ele[header[index].value],
              value: `type${idx}`
            });
          });
        } else {
          let obj = {
            mainIndex: header[index].label,
            unit: header[index].unit
          };
          data.forEach((ele, ind) => {
            obj[`type${ind}`] = ele[header[index].value];
          });
          enddata.push(obj);
        }
      });
      return [enddata, endheader];
    },
    
    // 列表格式化
    tableFormatter(prop, row) {
      if (row[prop] || row[prop] == 0) {
        if (prop === 'mainIndex') {
          if (row.unit) {
            return `${row[prop]}（${row.unit}）`;
          }
          return row[prop];
        }
        return row[prop];
      }
      return '--';
    }
  }
};
</script>

参考

• #

补充

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

最后

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