使用 Element Plus 表格自定义表头时处理动态数据更新问题

在使用 Element Plus 表格时，我们有时需要自定义表头以满足特定需求。我们可以通过插槽的方式来实现表头自定义。

    在自定义表头时，我们可能会遇到这样一个问题：当表格数据更新时，表头中绑定的值却无法及时更新。这是因为插槽组件是独立于父组件的，当父组件数据更新时，插槽组件并不会自动更新。

    为了解决这个问题，我们需要使用 Element Plus 提供的 `scopedSlots` 特性。`scopedSlots` 允许我们在插槽组件中访问父组件的作用域，从而可以动态获取父组件数据。

    以下是使用 `scopedSlots` 来解决自定义表头数据更新问题的步骤：

    1. 在父组件中，将表头模板定义为 `scopedSlots`。
    2. 在插槽组件中，使用 `props` 接收父组件传递过来的数据。
    3. 在插槽组件中，使用 `watch` 监听父组件数据变化，并相应地更新表头内容。

    下面是一个使用 `scopedSlots` 解决自定义表头数据更新问题的代码示例：

    ```html
    <el-table :data="tableData">
      <template #header="scope">
        <div>{{ scope.row.name }}</div>
      </template>
    </el-table>
    ```

    ```javascript
    export default {
      data() {
        return {
          tableData: [
            { name: 'John' },
            { name: 'Mary' },
          ],
        };
      },
      watch: {
        tableData: {
          handler(newValue, oldValue) {
            // 当 tableData 更新时，更新插槽组件中的数据
            this.$refs.table.doLayout();
          },
          deep: true,
        },
      },
    };
    ```

    通过使用 `scopedSlots`，我们就可以确保当父组件数据更新时，自定义表头的内容也会随之更新。