【前端】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>&nbsp;" +
        "<button @click=detail(id) class='btn btn-success btn-xs'><i class='fa fa-trash'></i>查看</button>&nbsp;" +
        "<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')这种方式（现在使用的）时，是直接将挂载点替换了。