需求:tooltip内formatter自定义一个按钮要求点击使用element Dialog对话框弹框展示详情(之前是设置a标签直接跳转到对应详情页,但是后来涉及权限,该用户有map权限没有详情页面的权限故导致页面空白)
解决方案
formatter: (params) => {} 内直接这样绑定<div class='specialLook' style="width:100px;height:30px;background-color:blue;text-align:center;line-height:30px;cursor: pointer;" οnclick="${that.todoSth(params.data.data)}">查看详情>></div>
但是导致问题没有点击就直接触发事件故直接在方法内自行写了一个绑定事件(代码比较lowB)所幸解决我想要的功能各位有什么优化意见可以提出,
formatter: (params) => {
var html =`<div class='specialLook' style="width:100px;height:30px;background-color:blue;text-align:center;line-height:30px;cursor: pointer;" onclick="${that.todoSth(params.data.data)}">查看详情>></div>`
return html
}
// methods内绑定事件部分
todoSth (val) {
var that = this
// 自己又添加一次
this.$nextTick(() => {
var obj = document.getElementsByClassName("specialLook")[0]
obj.addEventListener("click", function () {
obj.parentElement.parentElement.parentElement.parentElement.style.display = 'none'
that.changeItem(val, 'detail')
});
})
},