var zddie = document.getElementById('A0101').parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.previousSibling
var pop ='<a-popover trigger="click">'+
'<template slot="content">'+
'<p style="color: #000;font-size: 13px;width: 300px">'
+222+
'</p>'+
'</template>'+
'<a-icon type="question-circle" style="color:#DFDFDF;margin:0;margin-left: 10px;font-size:13px"/>'+
'</a-popover>'
zddie.insertAdjacentHTML('beforeend', pop)
换成 ``呢
可能是 字符串 拼接的问题 你使用 es6模板字符串试试 。
总的来说这个和渲染时机有问题 你用js插入的数据并没有被 vue 所渲染
正常来说一个组件如果被渲染的话他会被解析成 对应的 html 识别的标签,就像 a-popover 这其实是你自定义的组件,html并不识别这个组件,你不能直接去使用 insertAdjacentHTML 向后直接插入这个组件
你现在要做的是要将 vue 组件解析成 组件内部定义的最终html识别的组件,在插入进去
可以尝试这样使用一下
<span id="a-span">
123123
</span>
// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}} <el-button>小仙男在努力<el-button> {{lastName}} aka {{alias}}</p>',
data: function() {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
new Profile().$mount('#a-span')