正文
【前端】vue2.x 配合 bootstrapTable 动态添加元素和绑定点击事件，事件无效 解决
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
背景：
使用bootstrap-table 表格插件时，每一行的最后一班会加操作按钮列。如果不加入vue的话，使用插件自己的列属性formatter:function(value, row, index){}即可解决，动态拼接的html元素和对应的点击事件都可以正常使用。问题来了，在使用vue时，点击事件不起作用了，F12后发现@click=""被解析成字符串了.这不就很扯淡了。
分析：
使用vue时，点击事件在vue初始化的时候进行编译的，但bootstrap-table中行操作事件和dom并没有加载进去。所以@click等事件自然而然的被当成字符串来玩了。
解决：
方案一：
上面说了，vue编译时还没加载，那咱能不能再bootstrap-table加载onLoadSucces的时候在进行编译什么的？我是将Vue根实例放在bootstrap-table 加载成功的函数里面了(可能不对！)，最后没有成功
方案二：
表格操作dom和事件被识别成字符串了,Vue没有编译。咱能不能先让Vue把dom编译好了，咱再把dom插入到对应的节点上去。所以就引出 Vue的组件知识了。具体知识点还是各位自行查询琢磨。我这里给出解决结果。
代码：
不使用vue时bootstrap-table对操作列加载方式如下
{
title: '操作',
valign:'middle',
width:'300px',
formatter:function(value, row, index){
var ans ="";
ans+="<a href=\"javascript:\" class=\"btn btn-primary btn-xs\" role=\"button\"><i class=\"fa fa-pencil-square-o\"></i>编辑</a> ";
ans+="<a href=\"javascript:\" class=\"btn btn-success btn-xs\" role=\"button\"><i class=\"fa fa-eye\"></i>查看</a> ";
ans=ans+"<a href=\"javascript:\" class=\"btn btn-danger btn-xs\" role=\"button\"><i class=\"fa fa-trash\"></i>删除</a> ";
return ans;
}
},
使用Vue操作解决方案：
① 创建组件
var editComponent = Vue.extend({
template: "<div style='display:flex;'>" +
"<button @click=edit(id) class='btn btn-primary btn-xs'><i class='fa fa-pencil-square-o'></i>编辑</button> " +
"<button @click=detail(id) class='btn btn-success btn-xs'><i class='fa fa-trash'></i>查看</button> " +
"<button @click=del(id) class='btn btn-danger btn-xs'><i class='fa fa-eye'></i>删除</button>" +
"</div>",
props:['id'],
methods:{
edit:function (id) { },
del:function (id) { }
}
});
② 在bootstrap-table 加载成功后动态的将组件注入到对应的dom节点。
{
title: '操作',
valign:'middle',
width:'300px',
formatter:function(value, row, index){
// 由于id不能使用纯数字所有在id前面统一加上row字符串。取得时候截取即可
var id = "row"+row.id ;
var ans ="<div class='rowOperator' id="+id+"></div>";
return ans;
}
},
onLoadSuccess:function () {
//document.getElementById("testId").appendChild(new editComponent({propsData: {id : '魏正迪'}}).$mount().$el);
$(".rowOperator").each(function () {
var idTemp = $(this).attr("id");// row+id
new editComponent({propsData: {id : idTemp.substring(3)}}).$mount('#'+$(this).attr("id"));
});
}
注意点：
①、构建组件时要传入值时，借助props:['id']。但是真正创建组件时是使用propsDate进行值传入。
②、组件挂载时，使用.$mount('#id')这种方式（现在使用的）时，是直接将挂载点替换了。
