vue+handsontable+elementui动态绑定点击弹框事件

vue+handsontable+elementui动态绑定点击弹框事件

前端小白最近的遇到一个新需求，用hansontable生成表格，表格中第一列单元格是图片，图片下方有一个更新按钮，点击更新按钮会弹出一个上传图片的对话框，我遇到的问题主要是卡在了更新按钮绑定点击事件不生效的问题这，下面是我的记录
参考链接: 链接: [https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124154575]
写了个大概，记录下问题，又想深入了解的评论区联系，基本上每天都看
下面是图示

错误做法

在hansontable第一列定义一个renderer函数，在函数中插入innerhtml,此时并没有给更新图片绑定点击事件，而是使用添加事件监听的方式绑定的点击事件，在监听中修改是否弹框属性，这种做法最后的结果就是弹框无法关闭，而且弹框中引用的组件也显示不出来，试了很多次都没有结果（切记使用 ` 反单引号）

columns: [
            //第一列图片自定义函数，显示图片，添加更新图片按钮并绑定点击事件
            {
              renderer: (instance, td, row, col, prop, value, cellProperties)=> {
                var dialogVisible= true
                const escaped = Handsontable.helper.stringify(value);
                Handsontable.dom.empty(td);
                td.style.textAlign = 'center';//图片居中对齐
                td.innerHTML =`<div><p><img src=${escaped} style='width: 100px'></p>` +
                  `<el-button id=${row} type='primary' plain size='small'
                  style='position: center;border-bottom: 5px solid blue;color: #0064B4'   >更新图片</el-button></div>`;

                // document.getElementById(row).addEventListener("click", function() {
                //   // 具体执行代码
                   console.log("点击id为"+row+"按钮")
                   document.getElementsByName("")
                   var test=document.getElementById("test")
                   test.setAttribute("style","display: block ;")
                   console.log("sync"+test.getAttribute(":visible.sync"))
                   test.setAttribute(":visible.sync","true")
                 } , false);
                return td;
              },
            },{},{},{},{},{},{},{},{},
          ],

最终做法

1、在第一列只插入innerhtml，在更新图片button标签中绑定onclick事件，并写上函数名

columns: [
            //第一列图片自定义函数，显示图片，添加更新图片按钮并绑定点击事件
            {
              renderer: (instance, td, row, col, prop, value, cellProperties)=> {
                var dialogVisible= true
                const escaped = Handsontable.helper.stringify(value);
                Handsontable.dom.empty(td);
                td.style.textAlign = 'center';//图片居中对齐
                td.innerHTML =`<div><p><img src=${escaped} style='width: 100px'></p>` +
                  `<el-button id=${row} type='primary' plain size='small'
                  style='position: center;border-bottom: 5px solid blue;color: #0064B4' onclick="showUpload()"  >更新图片</el-button></div>`;
                return td;
              },
            },{},{},{},{},{},{},{},{},
          ],

2、在mounted函数中调用methods中的方法showUpload

mounted() {

      //生命周期注意点
      this.shelfupInstance = this.$refs.shelfupRef.hotInstance;
      //模板参数传参
      const _this = this
      //innerHtml中给更新按钮button绑定onclick事件，在此处进行调用
      window.showUpload=function (){
        _this.showUpload();
      }
    },

3、在showUpload方法中修改dialog弹框的:visible.sync属性值为true

 showUpload() {
        console.log("进来了")
        this.dialogVisible = true
      },