【elementui动态设置el-table表头并添加插槽】

在Element UI中，可以通过动态绑定数据来设置el-table的表头，并且可以使用插槽来自定义表头内容。以下是一个简单的例子，展示如何动态设置表头并添加插槽：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="header in tableHeaders"
      :key="header.prop"
      :prop="header.prop"
      :label="header.label">
      <template v-if="header.slot" slot-scope="scope">
        <!-- 插槽内容 -->
        <span>{{ scope.row[header.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ],
      tableHeaders: [
        // 动态设置的表头数组
      ]
    };
  },
  created() {
    this.tableHeaders = [
      { label: '日期', prop: 'date' },
      { label: '姓名', prop: 'name' },
      // 可以添加更多的表头信息
    ];
  }
};
</script>

在这个例子中，tableHeaders数组定义了表格的表头信息，包括每列的label和对应的数据属性prop。el-table-column通过循环生成，并根据header.slot判断是否需要添加插槽。插槽中可以自定义显示内容，这里只是简单地显示了scope.row[header.prop]的值。