eltable动态生成表头

eltable是element-ui中的一个表格组件，可以通过动态生成表头来适应不同的表格需求。以下是一个示例：

<template>
  <el-table :data="tableData" :column-key="columnKey">
    <el-table-column
      v-for="(column, index) in tableColumns"
      :key="index"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
      :sortable="column.sortable"
      :sort-method="column.sortMethod"
      :render-header="column.renderHeader"
    >
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20, gender: 'Male' },
        { name: 'Mary', age: 25, gender: 'Female' },
        { name: 'Bob', age: 30, gender: 'Male' },
      ],
      tableColumns: [
        { label: 'Name', prop: 'name', width: '150px' },
        { label: 'Age', prop: 'age', width: '100px', sortable: true },
        { label: 'Gender', prop: 'gender', width: '100px', sortMethod: this.sortGender },
      ],
      columnKey: 'name'
    }
  },
  methods: {
    sortGender(a, b) {
      if (a.gender === b.gender) {
        return 0
      } else if (a.gender === 'Male') {
        return -1
      } else {
        return 1
      }
    },
    generateColumns() {
      // 根据数据动态生成表头
      const columns = []
      // 从后端接口获取表头数据
      const headers = getHeaders()
      headers.forEach(item => {
        columns.push({
          label: item.label,
          prop: item.prop,
          width: item.width
        })
      })
      this.tableColumns = columns
    }
  },
  mounted() {
    this.generateColumns()
  }
}
</script>

在上面的示例中，我们首先定义了一个`tableColumns`数组来存储表头信息，然后在组件的`mounted`钩子中调用`generateColumns`方法来动态生成表头。`generateColumns`方法可以从后端接口获取表头数据，然后将其转换为`tableColumns`数组中的格式。最后，我们在`el-table`组件中使用`v-for`指令来动态渲染表头。