el-table自定义label 使用h函数 绑定事件和数据
Loading.vue<template><div v-if="show" class="lds-spinner"><div class="spinner"><div class="double-bounce1"></div><div class="double-bounce2"></div></div>
·
1、在render-header 上显示 el-date-picker 并实现数据、事件绑定
:render-header=“renderHeader”
renderHeader(h, { column, $index }) {
var self = this
return h('div', { class: 'class1' },
[
h('el-date-picker', {
props: {
type: 'date',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd',
placeholder: '选择日期',
pickerOptions: self.pickerOptions
},
domProps: {
value: self.value2
},
attrs: {
value: self.value2 // 处理默认显示的,
},
style: {
backgroundColor: 'red',
fontSize: '14px'
},
event: {
},
on: {
input: function(event) {
self.value2 = event
},
change: (e) => {
self.value2 = e
},
blur(e) {
}
}
}),
h('i', {
class: 'el-icon-refresh-right',
style: {
paddingLeft: '15px'
},
on: {
'!click': self.refreshData
}
}
)
]
)
},
refreshData() {
console.log('刷新数据')
},```
2、自定义label 提示文字
renderHeader (h, { column }) {
let serviceContent = [
h(
'div',
{
slot: "content",
},
"测试"
)
]
return h("div", [
h("span", column.label),
h(
"el-tooltip",
{
props: {
placement: "top"
}
},
[
serviceContent,
h("i", {
class: "el-icon-question",
style: "color: #ffd737;font-size: 16px;margin-left: 10px"
})
]
)
]);
}
更多推荐
已为社区贡献2条内容
所有评论(0)