elementUI Table 自定义表头 动态数据及插槽

在Element UI中，可以通过使用el-table-column的render-header属性来自定义表头，并使用插槽来动态渲染数据。以下是一个简单的示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="item in tableColumns"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label">
      <template slot="header" slot-scope="scope">
        {{ item.label }} <i :class="item.icon"></i>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ... 数据项
      ],
      tableColumns: [
        { label: '日期', prop: 'date', icon: 'el-icon-time' },
        { label: '姓名', prop: 'name', icon: 'el-icon-user' },
        // ... 更多列
      ],
    };
  },
};
</script>

在这个例子中，tableColumns数组定义了表格的列信息，包括列名和图标。render-header属性使用了作用域插槽<template slot="header" slot-scope="scope">来动态渲染表头，包括列名和图标。这样，你可以根据需要动态更新tableColumns数据，表格的列结构也会相应更新。