Element-ui自定义Table：修改表头样式与添加tooltip

本文主要介绍了如何在Element-UI框架中自定义Table的表头，包括修改列标题样式、添加Tooltip以及使用`:render-header`属性进行复杂渲染。 在Element-UI中，`render-header`是一个非常实用的功能，它允许开发者自定义表格列的标题区域。通过传递一个函数给`render-header`，我们可以对列标题进行更灵活的控制。这个函数接受两个参数：`h`（用于创建Vue组件的函数）和`{column, $index}`（当前列的属性和索引）。 例如，如果我们想在列标题后添加一个图标，可以这样操作： ```html <template> <el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName"> <!-- ... --> <el-table-column prop="address" label="地址" :render-header="renderHeader"> <!-- 添加render-header --> </el-table-column> </el-table> </template> <script> export default { methods: { renderHeader(h, { column }) { // h代表createElement，用于构建Vue组件 return h('div', [ h('span', column.label), // 显示原始列标题 h('i', { class: 'el-icon-position' }) // 添加定位标志图标，这里假设你引入了对应的图标库 ]); }, // ...其他方法 } }; </script> ``` 在这个例子中，我们创建了一个新的`div`元素作为标题的容器，然后将原始列标题和一个新的图标元素放入其中。`column.label`用于获取列的原始标题，而`h('i', { class: 'el-icon-position' })`则创建了一个带有特定类名的`i`元素，用于显示图标。 除了添加图标，我们还可以利用`render-header`实现更多复杂功能，如添加Tooltip提示。例如，如果我们想在鼠标悬停时显示列标题的详细信息，可以这样做： ```javascript methods: { renderHeader(h, { column }) { return h('div', [ h('span', { slot: 'append', class: 'tooltip-label', tooltip: column.tooltip || '' // 假设column.tooltip存储了Tooltip内容 }, column.label), // 其他元素... ]); } } ``` 同时，我们可以在CSS中定义`.tooltip-label`的样式，并使用第三方库（如Vuetify或Element-UI的内置Tooltip）来实现Tooltip效果。 Element-UI的`render-header`特性为表格提供了强大的定制能力，使得我们可以根据需求自由设计列标题的展示方式，无论是简单的文本调整还是复杂的组件嵌入，都能轻松应对。结合其他属性如`:row-class-name`，可以进一步增强表格的交互性和美观性。