背景：

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