element-plus的el-table如何保留原有筛选功能，让表头一行显示，超出显示省略号，

### 实现 Element Plus 的 el-table 表头单行显示并超出部分省略号 为了实现 `Element Plus` 中的 `el-table` 表头单行显示且超出部分以省略号表示，可以通过自定义表头渲染的方式完成。具体方法如下： #### 1. **使用 `render-header` 自定义表头** 通过 `render-header` 属性，可以覆盖默认的表头渲染逻辑，并手动设置 CSS 样式来实现单行显示和省略号效果。 以下是具体的代码示例： ```vue <template> <el-table :data="tableData"> <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label" :filters="column.filters" :filter-method="column.filterMethod" :width="column.width" show-overflow-tooltip > <!-- 自定义表头 --> <template #header="{ column }"> <div class="ellipsis">{{ column.label }}</div> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 25 }, { name: '李四', age: 30 } ], columns: [ { prop: 'name', label: '姓名 (这是一个非常长的表头名称)', width: 150, filters: [{ text: '张三', value: '张三' }], filterMethod(value, row) { return row.name === value; } }, { prop: 'age', label: '年龄', width: 100 } ] }; } }; </script> <style> /* 定义单行显示和省略号 */ .ellipsis { white-space: nowrap; /* 防止文本换行 */ overflow: hidden; /* 隐藏溢出的文本 */ text-overflow: ellipsis; /* 显示省略号 */ } </style> ``` 以上代码实现了以下功能： - 使用 `v-for` 动态生成列配置。 - 利用 `#header` 插槽来自定义表头内容[^3]。 - 设置 `.ellipsis` 类样式，确保表头文字单行显示并超出部分以省略号代替[^1]。 #### 2. **保留筛选功能** 在上述代码中，每列表格都支持动态传入 `filters` 和 `filterMethod` 参数，从而保持原生筛选功能不受影响[^3]。 #### 3. **优化弹窗提示** 如果需要进一步优化弹窗提示的效果（如调整宽度），可以在全局样式中重新定义 `.el-tooltip__popper` 的样式[^4]： ```css .el-tooltip__popper { max-width: 300px; /* 修改宽度 */ font-size: 14px; /* 字体大小 */ } ``` 此方式适用于 `show-overflow-tooltip` 属性生效的情况下，确保单元格内容超长时也能友好地展示给用户。 --- ###