Vue Element table 组件表头处如何添加 icon
1.首先附上 Element-ui 官方文档中的说明https://element.eleme.io/#/zh-CN/component/table#table-column-scoped-slot2 如何使用首先在需要添加 icon 的地方,绑定 render-header attribute ,如下:<el-table-columnicon="el-icon...
·
1.首先附上 Element-ui 官方文档中的说明
https://element.eleme.io/#/zh-CN/component/table#table-column-scoped-slot
2 如何使用
- 首先在需要添加 icon 的地方,绑定 render-header attribute ,如下:
<el-table-column
icon="el-icon-refresh"
:render-header="renderHeaderMethod"
>
</el-table-column>
- 具体如何添加如下:
renderHeaderMethod(h, { column, $index }) {
// h 是一个渲染函数 column 是一个对象表示当前列 $index 第几列
return h("div", [
h("span", column.label + " ", {
align: "left"
}),
h(
"el-popover",
{
props: {
placement: "top-start", // 一般 icon 处可添加浮层说明,浮层位置等属性
width: "300",
trigger: "hover"
}
},
[
h("p", "XXXXXXXXXXXXXXXX", {
class: "text-align: right; margin: 0"
}),
h("i", { // 生成 i 标签 ,添加icon 设置 样式,slot 必填
class: "el-icon-question",
style: "color:#ccc,margin:18px",
slot: "reference"
})
]
)
]);
}
更多推荐
已为社区贡献4条内容
所有评论(0)