element-ui 组件中表格组件如何通过renderheader实现自定义表头样式
element-ui 官网介绍的比较简单。
首先在需要自定义样式的列上定义好方法render-header,然后再methods里面定义好对应的headercellclassname方法
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址" :render-header="headercellclassname"></el-table-column>
</el-table>
该方法实现了在地址这一列的标头后面添加了一个图标,鼠标hover上去的时候显示对应的提示信息。
主要通过h方法定义标签,属性以及子标签。
h 方法的参数说明,主要由四个参数:
h(a,b,c,d)
a: 标签元素
b:标签文本
c:标签属性
d: 下级标签
从实际情况看,如果不穿传第二个参数,会默认解析到第三根参数,比如一下方法就没有传第二个参数,也能正常解析。
headercellclassname(h, { column, $index }) {
// 自定义表格label样式
return h("div", [
h("span", column.label),
h(
"el-popover",
{
props: {
content: "最多显示5位责任人,如有更多责任人,请进入项目详情查看",
placement: "top",
trigger: "hover",
},
},
[
h("span", {
class: "el-icon-warning",
style: "color:#c7c9d4",
slot: "reference",
}),
]
),
]);
},
发表评论 (审核通过后显示评论):