elementui修改el-table-filter样式

要修改 `el-table` 中 `el-table-filter` 的样式，可以使用以下步骤：

1. 在 `el-table` 中添加 `slot="header"`，以便自定义表头。

2. 在 `slot="header"` 中添加 `template`，并设置 `slot-scope` 为 `{ column }`，以便获取当前列的信息。

3. 在 `template` 中添加一个 `div` 元素，并设置 `class` 属性为 `filter-wrapper`，并为其添加样式。

4. 在 `div` 元素中添加 `el-table-filter` 组件，并设置其 `data-key` 属性为当前列的 `property` 值。

5. 设置 `el-table-filter` 组件的样式，可以通过使用 `::v-deep` 或 `>>>` 来覆盖其默认样式。

下面是一个示例代码：

<template>
  <el-table :data="tableData">
    <el-table-column
      prop="name"
      label="姓名"
      :filters="filterOptions"
      :filter-method="filterMethod"
      slot="header"
      v-slot="{ column }"
    >
      <div class="filter-wrapper">
        <el-table-filter
          :data-key="column.property"
          style="width: 100%;"
        ></el-table-filter>
      </div>
    </el-table-column>
  </el-table>
</template>

<style scoped>
.filter-wrapper {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f7f7f7;
}

::v-deep .el-table-filter__list {
  max-height: 200px;
  overflow: auto;
}

::v-deep .el-table-filter__list li label {
  display: block;
  margin: 5px 0;
}

::v-deep .el-table-filter__bottom {
  padding: 5px;
  text-align: right;
}
</style>

在上面的示例代码中，我们为 `el-table` 中的每一列都添加了 `el-table-filter` 组件，并使用 `filter-wrapper` 类来设置其样式。同时，我们使用 `::v-deep` 来覆盖了 `el-table-filter` 组件的默认样式，包括设置选项列表的最大高度、调整每个选项的样式以及设置底部按钮的样式。