el-table 如何把接口返回来的数据动态添加表头和内容

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="(header, index) in tableHeaders"
      :key="index"
      :prop="header.prop"
      :label="header.label">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableHeaders: [],
      tableData: []
    };
  },
  mounted() {
    // 假设fetchData是获取接口数据的函数
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟接口数据获取
      axios.get('/api/data').then(response => {
        // 假设返回的数据格式为 { headers: [], data: [] }
        const { headers, data } = response.data;
        
        // 设置表头
        this.tableHeaders = headers.map(header => ({
          label: header,
          prop: header.toLowerCase() // 假设表头对应的属性名为表头名称的小写
        }));
        
        // 设置表格数据
        this.tableData = data;
      });
    }
  }
};
</script>