vue3.0使用el-table-column动态表头给最下面添加一行

在Vue3.0中，使用Element UI的`el-table-column`动态生成表头，并向表格底部添加一行通常需要结合数据驱动的方式来实现。这里是一个简单的示例：

首先，你需要在组件的数据选项（data）里定义一个数组，这个数组将包含动态表头的所有信息，包括字段名和排序规则等。例如：

export default {
  data() {
    return {
      tableData: [
        // 表格数据...
      ],
      dynamicColumns: [
        { field: 'name', title: '姓名' },
        { field: 'age', title: '年龄' },
        // 更多动态列...
      ]
    };
  },
};

然后，在模板中，你可以遍历`dynamicColumns`数组来渲染`el-table-column`：

<template>
  <el-table :data="tableData">
    <el-table-column v-for="(column, index) in dynamicColumns" :key="index" :prop="column.field" :label="column.title">
      <!-- 如果需要添加表头行，可以在最后一项之后插入 -->
      <template slot-scope="scope" v-if="index === dynamicColumns.length - 1">
        <el-row class="table-bottom-row">
          <el-col>总计</el-col>
          <el-col>{{ getTotal(column.field) }}</el-col>
        </el-row>
      </template>
      <!-- 其他内容... -->
    </el-table-column>
  </el-table>
</template>

<script>
// 定义获取总计函数（这里假设是计算某字段的总和）
methods: {
  getTotal(field) {
    let total = 0;
    this.tableData.forEach(row => {
      total += row[field];
    });
    return total;
  }
}
</script>

在这个例子中，当遍历到`dynamicColumns`数组的最后一个元素时，会插入一条表头行，显示的是最后一个字段的总计。