面试题：Element UI 的表格组件如何实现动态表头？

在 Element UI 中，表格组件（el-table）支持动态表头，可以通过动态绑定 el-table-column 的 prop 和 label 属性来实现。以下是实现动态表头的几种常见方式：

1. 使用 `v-for` 动态生成表头

通过 v-for 动态生成 el-table-column，可以根据数据动态渲染表头。

示例：

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="(column, index) in tableColumns"
      :key="index"
      :prop="column.prop"
      :label="column.label"
    />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, address: 'New York' },
        { name: 'Jane', age: 30, address: 'London' },
      ],
      tableColumns: [
        { prop: 'name', label: 'Name' },
        { prop: 'age', label: 'Age' },
        { prop: 'address', label: 'Address' },
      ],
    };
  },
};
</script>

说明：

tableColumns 是一个数组，定义了表头的 prop 和 label。
使用 v-for 动态生成 el-table-column，实现动态表头。

2. 动态修改表头数据

如果需要根据用户操作或其他逻辑动态修改表头，可以直接修改 tableColumns 数据。

示例：

<template>
  <div>
    <el-button @click="addColumn">Add Column</el-button>
    <el-table :data="tableData">
      <el-table-column
        v-for="(column, index) in tableColumns"
        :key="index"
        :prop="column.prop"
        :label="column.label"
      />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, address: 'New York' },
        { name: 'Jane', age: 30, address: 'London' },
      ],
      tableColumns: [
        { prop: 'name', label: 'Name' },
        { prop: 'age', label: 'Age' },
        { prop: 'address', label: 'Address' },
      ],
    };
  },
  methods: {
    addColumn() {
      this.tableColumns.push({ prop: 'newColumn', label: 'New Column' });
    },
  },
};
</script>

说明：

点击按钮时，动态添加一个新的表头列。

3. 动态表头与动态数据结合

如果表头和数据都是动态的，可以同时动态生成表头和数据。

示例：

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="(column, index) in tableColumns"
      :key="index"
      :prop="column.prop"
      :label="column.label"
    />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableColumns: [],
    };
  },
  created() {
    this.fetchTableData();
  },
  methods: {
    fetchTableData() {
      // 模拟异步请求
      setTimeout(() => {
        this.tableColumns = [
          { prop: 'name', label: 'Name' },
          { prop: 'age', label: 'Age' },
          { prop: 'address', label: 'Address' },
        ];
        this.tableData = [
          { name: 'John', age: 25, address: 'New York' },
          { name: 'Jane', age: 30, address: 'London' },
        ];
      }, 1000);
    },
  },
};
</script>

说明：

在 created 钩子中模拟异步请求，动态设置表头和数据。

4. 动态表头与自定义模板结合

如果需要自定义表头或单元格内容，可以使用 slot 插槽。

示例：

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="(column, index) in tableColumns"
      :key="index"
      :prop="column.prop"
      :label="column.label"
    >
      <template slot="header" slot-scope="scope">
        <span style="color: red;">{{ scope.column.label }}</span>
      </template>
      <template slot-scope="scope">
        <span style="color: blue;">{{ scope.row[scope.column.property] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, address: 'New York' },
        { name: 'Jane', age: 30, address: 'London' },
      ],
      tableColumns: [
        { prop: 'name', label: 'Name' },
        { prop: 'age', label: 'Age' },
        { prop: 'address', label: 'Address' },
      ],
    };
  },
};
</script>

说明：

使用 slot 插槽自定义表头和单元格内容。

5. 动态表头与排序、筛选结合

如果需要对动态表头实现排序或筛选功能，可以在 el-table-column 中配置 sortable 和 filters 属性。

示例：

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="(column, index) in tableColumns"
      :key="index"
      :prop="column.prop"
      :label="column.label"
      :sortable="column.sortable"
      :filters="column.filters"
      :filter-method="column.filterMethod"
    />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, address: 'New York' },
        { name: 'Jane', age: 30, address: 'London' },
      ],
      tableColumns: [
        { prop: 'name', label: 'Name', sortable: true },
        { prop: 'age', label: 'Age', sortable: true },
        {
          prop: 'address',
          label: 'Address',
          filters: [
            { text: 'New York', value: 'New York' },
            { text: 'London', value: 'London' },
          ],
          filterMethod: (value, row) => row.address === value,
        },
      ],
    };
  },
};
</script>

说明：