Vue2.x与bootsrap-table动态添加元素和绑定事件无效

　一、问题：

　　    最近在使用vue与bootstrap-table结合生成表格时，按以前的经验----每列数据可用formatter:function(value,row,index){}进行一些其他的操作，动态拼接的html元素和绑定的方法事件都可正常执行，但在vue内使用后，拼接的元素显示正常，其绑定的方法却失效了。F12查看元素时发现绑定的@click=""被解析成字符串。

　二、原因：　

　　　 这是由于vue的生命周期导致的，vue在初始化时@click已编译，但此时boostrap-table动态添加的dom元素还未加载进来。导致@click并未绑定到dom元素上，被解析成字符串。

 

　三、解决方案：

　　　　能不能在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元素的列顺序对应

 

转载于:https://www.cnblogs.com/Joker-Face/p/11019888.html