ElementUI的Table-column_render-header⾃定义表头
ElementUI的Table表格，官⽅⽹站上提供了很多样式，但是在⽇常开发中还会碰到各种情况，显然官⽅提供的是不能满⾜需求的。那么，我们就根据⾃⼰的需求对table进⾏改造。
下⾯就关于Table-column中render-header的运⽤，稍作说明，具体请移步此项⽬⽂件中查看(⽂章最下⾯有传送门)。
参数说明类型可选值默认值
render-header列标题 Label 区域渲染使⽤的 Function Function(h, { column, $index })——
⼀、⾃定义表头样式
renderHeaderOne (h, { column, $index }) {
return h('span', [columnspan是什么意思
h('span', column.label),
h('span', {
class: 'errorIcon',
on: {
click: () => {
console.log(`${column.label}  ${$index}`)
}
}
})
]
)
}
⼆、⾃定义表头样式和整列的拖动
renderHeader (h, { column, $index }) {
// 这⾥可以根据$index的值来对⾃⾝需求进⾏修改，
return h('span', {
'class': ['thead-cell'],
on: {
mousedown: ($event) => { this.handleMouseDown($event, column) },
mouseup: ($event) => { this.handleMouseUp($event, column) },
mousemove: ($event) => { this.handleMouseMove($event, column) }
}
}, [
h('span', [
h('span',
{
class: $index === 0 ? 'el-icon-star-off' : $index === 1 ? 'el-icon-time' : $index === 2 ? 'el-icon-location' : '',
style: {
// marginLeft: ''
},
on: {
}
}),
h('span', column.label)
]),
h('span', {
'class': ['virtual']
})
])
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。