vue+iview 使用v-html属性显示html代码并调用方法

项目架构

vue +iview

使用window对象的原因

需要自己拼接HTML代码 即使用 v-html 属性
在自己拼装的html代码中添加方法
使用的是 οnclick="changeSelBtn(’ + a + ',2)"
这个方法不能直接调用到vue中的 methods 中的方法
暂时定义了window对象方法使用
在使用后，会导致window对象中方法/变量在不断增加，可能在其他页面使用到相同的方法/变量导致数据或函数错误
想到的解决方法1
在vue周期中，销毁页面之前或者销毁之后删除或将方法/变量赋空
想到的方法2
没有想到
下附代码

场景1

一个拼接好的HTML里边含有多个方法

这是定义方法/变量

    tableDisplay(data) {
      let vm = this
      let html = ' <table border="1" width="100%"  style="margin-top: 15px;text-align: center;background-color: #fff;" >\n' +
        '      <thead>\n' +
        '      <tr style="background-color: #b7fbf1;">\n' +
        '        <td class="tabletou" width="20%">名称</td>\n' +
        '        <td class="tabletou" width="20%">id</td>\n' +
        '        <td class="tabletou" width="20%">时间</td>\n' +
        '        <td class="tabletou" width="20%">状态</td>\n' +
        '        <td class="tabletou" width="20%">操作</td>\n' +
        '      </tr>\n' +
        '      </thead><tbody>'
      // 循环tr
      data.forEach(item1 => {
        html += ' <tr><td width="20%" ' + 'rowspan="' + item1.instance.length + '">' + item1.name + '</td>'
        item1.instance.forEach(item => {
          let a = vm.htmlEncodeByRegExp(JSON.stringify(item))
          html += '<td width="20%">' + item.instanceId + '</td>'
          html += '<td width="20%">' + vm.fmtDate(Number(item.lastUpdatedTimestamp)) + '</td>'
          html += '<td width="20%">' + item.status + '</td> '
          html += '<td width="20%">' +
            '<button class="buttons" ' + (item.status === 'UP' ? 'style=" background-color: #f90; border-color: #f90;"' : 'style=" background-color: #ccc; border-color: #f90;"') + ' onclick="changeSelBtn(' + a + ',0)" >' + (item.status === 'UP' ? '暂停' : '恢复') + '</button>' +
            '<button class="buttons" style=" background-color: #ed4014; border-color: #ed4014;" onclick="changeSelBtn(' + a + ',2)" >移除</button>' +
            '<button class="buttons" style=" background-color: #14ed67; border-color: #14ed67;" onclick="changeSelBtn(' + a + ',3)" >查询</button>' +
            '</td></tr>'
        })
      })
      html += '</tbody></table>'
      document.getElementById('tableShow').innerHTML = html
      window.changeSelBtn = function(data, type) {
        vm.changeSelBtn2(data, type)
      }
    },

这是赋空方法/变量

//  销毁前
  beforeDestroy () {
    delete  window.changeSelBtn
  },
 //  销毁后
  destroyed(){
    delete  window.changeSelBtn
  }

不使用window对象，使用h5中的标签属性

拼接好的html中只有一个方法时
上代码

html部分

<div  @click="hopRouting($event)"  v-html="messageContent"></div>

方法区

根据获取到的dom对象获取对应的值
      hopRouting(e) {
        let vm = this
        let target = e.target
        判断是否是自己需要的标签  a 标签  ，data-type 类型为 workorder  获取到的内容为  data-id中的
        if (target.nodeName.toLowerCase() === 'a' && target.getAttribute('data-type') === 'workorder' ) {
        // 进行自己的逻辑处理  我这是跳转路由
          vm.$router.push({
            name: '我的路由名字',
            params: {
              workorderId: target.getAttribute('data-id')
            }
          })
        }
      },

v-html代码

messageContent

前缀：<a href="javascript:void(0)" data-type="workorder" data-id="目标id">显示内容</a>, 后缀

如果有更好的方法请联系，谢谢浏览