element ui table表头勾选触发筛选

您可以使用 Element UI Table 组件的 `header-cell-style` 属性和 `render-header` 事件来自定义表头的样式和行为。

首先，在 Table 组件中设置 `header-cell-style` 属性来为表头单元格添加一个复选框：

<el-table :data="tableData" header-cell-style="{ 'background-color': '#f5f7fa' }">
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column label="姓名" prop="name"></el-table-column>
  <el-table-column label="年龄" prop="age"></el-table-column>
</el-table>

接下来，你需要在 `render-header` 事件中编写一个方法来监听表头的勾选事件。在该方法中，你可以获取到当前选中的列，并将其用于过滤数据：

<el-table :data="tableData" :header-cell-style="{ 'background-color': '#f5f7fa' }" @render-header="renderHeader">
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column label="姓名" prop="name"></el-table-column>
  <el-table-column label="年龄" prop="age"></el-table-column>
</el-table>

methods: {
  renderHeader(h, { column }) {
    if (column.type === 'selection') {
      return (
        <el-checkbox
          indeterminate={this.isIndeterminate}
          nativeOn-click={this.toggleAllSelection}
          value={this.isAllSelected}
        >
          全选
        </el-checkbox>
      )
    } else {
      return column.label
    }
  },
  toggleAllSelection(event) {
    if (event.target.checked) {
      this.$refs.table.toggleAllSelection()
    } else {
      this.$refs.table.clearSelection()
    }
    this.filterTable()
  },
  filterTable() {
    const selectedColumns = this.$refs.table.store.states.selection.map(item => item.age)
    this.filteredTableData = this.tableData.filter(item => selectedColumns.indexOf(item.age) > -1)
  }
}

在上面的代码中，我们在 Table 组件中添加了一个 `render-header` 事件，并通过 `h()` 函数来渲染表头内容。在 `toggleAllSelection()` 方法中，我们通过 `$refs` 访问 Table 组件的实例，并调用 `toggleAllSelection()` 或 `clearSelection()` 方法来切换选中状态。最后，我们在 `filterTable()` 方法中使用 `selection` 数组中的列来过滤表格数据。

这样，当用户勾选表头中的复选框时，表格数据将会自动被过滤。