【前端】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')這種方式（現在使用的）時，是直接將掛載點替換了。