@给el-table表头增加控件,图标
前言
element-UI中给el-table表头增加控件,图标,
以及在增加中有增加样式盒子写不上去原因
二、使用步骤
1.组件代码
代码如下(示例):
<el-table-column label="好棒" width="120" :render-header="render">
</el-table-column>
2.methods中代码
代码如下(示例):
render(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("span",{
style:{
height: "10px",
width:"20px",
background:"#606266",
display:"inline-block",
marginRight:"8px"
},
},),
h("span",{
style:{
marginRight:"20px"
},
},"待执行"),
h("span",{
style:{
height: "10px",
width:"20px",
background:"#1ab394",
display:"inline-block",
marginRight:"8px"
},
},),
h("span",{
style:{
marginRight:"20px"
},
},"已执行"),
h("span",{
style:{
height: "10px",
width:"20px",
background:"#f56c6c",
display:"inline-block",
marginRight:"8px" },
},),
h("span",{
style:{
marginRight:"20px"
},
},"已作废"),
h("i", { // 生成 i 标签 ,添加icon 设置 样式,slot 必填
class: "el-icon-question",
slot: "reference"
})
]
)
])
},
#样式图
总结
在这里,有一个细节,就是在书写h(“div”,{ style:{width:“100px”}},“123”)时候你要是把123添加到大括号前面,那他的style样式就加不上,要严格这样书写