el-table的header里使用render加表单
2021-08-12 本文已影响0人
Frank_Fang
header加表单,需要使用render函数
<el-table-column align="center" :prop="col.prop" :type="col.type" :sortable="col.sortable" :width="col.width" :render-header="(h)=>renderHeader(h,col)" />
renderHeader (h, col) {
return h('span', [
h('span', {
domProps: {
innerText: col.label
}
}),
h(
'el-popover',
{
props: {
placement: 'bottom',
trigger: 'hover',
'open-delay': 400,
'close-delay': 400
}
},
[
h(
'el-link',
{
props: {
underline: false
},
slot: 'reference'
},
[
h('i', {
class: {
'pwc-icon-filter-outline': true
},
style: {
verticalAlign: 'baseline'
}
})
]
),
h(
'el-input',
{
style: {
width: '280px'
},
props: {
placeholder: this.$t('placeholder.filter'),
value: this.searchForm[col.prop],
clearable: true
},
on: {
input: (event) => {
this.searchForm[col.prop] = event
}
}
},
[
h('el-button', {
slot: 'append',
domProps: {
innerText: this.$t('btn.filter')
},
on: {
click: () => {
this.search()
}
}
})
]
)
]
)
])
}