Element Notification($notify自定义html)+createElement实现el-table表格展示及事件
需求:在页面右下角实现一个弹框,展示信息列表,并且可以进行相应操作问题: 无法获取监听事件、获取vue属性经过查询资料发现$createElement可以解决对应问题,现在讲代码展示出来。open2() {const h = this.$createElement;this.$notify({title: '数据校验',position: 'bottom-right',type: 'war...
·
需求:在页面右下角实现一个弹框,展示信息列表,并且可以进行相应操作
问题: 无法获取监听事件、获取vue属性
经过查询资料发现$createElement可以解决对应问题,现在讲代码展示出来。
//Notification 通知事件
open2() {
const h = this.$createElement;
this.$notify({
title: '数据校验',
position: 'bottom-right',
type: 'warning',
duration: 0,
dangerouslyUseHTMLString: true,
message: h('el-table', {props:{data:
vm.gridData,border:true,height:"250",size:"mini"},on: { 'row-click': this.check}, style:{with:'100%'}}, [
h('el-table-column', {props:{prop: "date",label:"日期"}},{}),
h('el-table-column', {props:{prop: "name",label:"姓名"}},{}),
h('el-table-column', {props:{prop: "address",label:"地址"}},{}),
h('el-table-column', {props:{width: "100",label:"操作",fixed:"right"}},[
h('el-button', { props: { type: 'text', size: 'mini' } }, '查看')
]),
])
});
},
//查看事件
check (row, event, column) {
if (event.label === '操作') {
console.log(row)
}
},
按照你的逻辑触发open2函数就可以在页面展示信息
实现效果:
需要注意的是这个查看功能让我弄了好久才实现,如果普通的el-table只需要用插槽就可以简单实现,但是 createElement创建的插槽,我试了各种方法都没法实现,如果你们可以用插槽实现希望可以留言代码感激不尽。
我实现的方法是利用el-table的row-click事件来实现查看功能
更多推荐
已为社区贡献4条内容
所有评论(0)