Vue2.x與bootsrap-table動態添加元素和綁定事件無效

　1、問題：

　　    最近在使用vue與bootstrap-table結合生成表格時，按之前的經驗----每列數據可用formatter:function(value,row,index){}進行一些其餘的操做，動態拼接的html元素和綁定的方法事件均可正常執行，但在vue內使用後，拼接的元素顯示正常，其綁定的方法卻失效了。F12查看元素時發現綁定的@click=""被解析成字符串。

　2、緣由：　

　　　 這是因爲vue的生命週期致使的，vue在初始化時@click已編譯，但此時boostrap-table動態添加的dom元素還未加載進來。致使@click並未綁定到dom元素上，被解析成字符串。

 

　3、解決方案：

　　　　能不能在boostrap-table隨vue一塊兒初始化時，把動態添加dom元素同時掛載到vue實例，使得table和動態dom同時初始掛載

　　使用Vue操做解決方案：

       ① 建立組件

　　

var toolsComponent = Vue.extend({
          props:['id','isOpen','url','hostUrl'],
          template: `<div style="display:flex;" >
                             <button class="btn btn-danger btn-sm"  style="margin:0 0 0 auto" @click="remove(id,url)">刪除</button>
                              <button :class="isOpen == true ? 'btn btn-success btn-sm': 'btn btn-warning btn-sm' "  style="margin:0 0"  @click="changeOpen(id,isOpen)" >{{isOpen == "true" ? "啓用" : "停用"}}</button>
                             <a class="btn btn-primary btn-sm"  style="margin:0 auto 0  0"  :href="hostUrl + '/getNews/' +url "   target="_blank">查看</a>
                             </div>
                             `,
          methods:{
                  changeOpen(newsId,openParam){}
                  remove(id,url){}
            }
}）    

　　② 在bootstrap-table 加載成功後動態的將組件注入到對應的dom節點。

    {
                  title : '操做',
                  align : 'center',
                  valign: 'middle',
                  width: '15%',
                  formatter : function(value, row, index) {
                  var openParam = "";
                  if(row.isOpen == false){
                    openParam = "true";
                    }else if(row.isOpen == true){
                    openParam = "false";
                    }
                    var url = row.newsUrl;
                    var id = "row"+row.id;
                    var buttonStr = "<div class='rowOperator' id="+id+" isOpen="+openParam+" newsUrl='"+url+"'></div>";
                    return buttonStr;
                  }
     }

 onLoadSuccess:function(){
            $(".rowOperator").each(function () {
                var idTemp = $(this).attr("id");// row+id
                var isOpen = $(this).attr("isOpen");
                var newsUrl = $(this).attr("newsUrl");
                new toolsComponent({propsData: {id : idTemp.substring(3),isOpen:isOpen,hostUrl:hostUrl,url:newsUrl}}).$mount('#'+$(this).attr("id"));
                });
}

①、構建組件時要傳入值時，藉助props:['id']。可是真正建立組件時是使用propsDate進行值傳入。

②、組件掛載時，使用.$mount('#id')這種方式（如今使用的）時，是直接將掛載點替換了。

③、onLoadSuccess:function(){}內可注入多個組件，且組件順序要按照須要動態添加dom元素的列順序對應