【前端】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 加载成功的函数⾥⾯了(可能不对！)，最后没有成功
为什么使用bootstrap?⽅案⼆：
  表格操作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 = d({
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 () {
//ElementById("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')这种⽅式（现在使⽤的）时，是直接将挂载点替换了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。