el-table表格前几行遍历数组，最后一行遍历对象，且最后一行表头少几个

需求：现在有el-table表格，表格的前几行是遍历数组arr1,最后一行是遍历对象obj1，并且最后一行比前几行少几个表头

思路：首先定义了一个columns数组来描述表头信息，然后使用v-for指令遍历这个数组来生成表格的前几列。

对于最后一行的自定义列，我们通过v-if指令来控制其显示与否，并在其中自定义了显示内容。这样，我们就可以实现前几行遍历数组arr1，最后一行遍历对象obj1，并且最后一行的表头数量少于前几行的效果。

<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <!-- 遍历arr1生成前几行的表格数据 -->
      <el-table-column v-for="column in columns" :key="column.prop" :label="column.label">
        <template slot-scope="scope">
          {{ scope.row[column.prop] }}
        </template>
      </el-table-column>
      <!-- 最后一行的自定义列 -->
      <el-table-column label="特殊列" v-if="showSpecialColumn">
        <template slot-scope="scope">
          <!-- 这里可以根据需要自定义显示内容，例如仅显示obj1中的部分字段 -->
          <span>{{ scope.row.specialField }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...this.arr1, this.obj1], // 将arr1和obj1合并为一个数组作为表格数据源
      columns: [{ prop: 'field1', label: '字段1' }, { prop: 'field2', label: '字段2' }], // 根据arr1的结构定义表头
      showSpecialColumn: true // 控制是否显示最后一行的自定义列
    };
  },
  methods: {
    getTableData() {
      // 这里可以添加获取表格数据的代码逻辑
    }
  },
  mounted() {
    this.getTableData();
  }
};
</script>