vue中使用bootstrapTable，但@click无效

vue和bootstrapTable结合使用@click无效

 

解决方法：

1.在bootstrapTable生成每一行数据时先定义一个空的标签，用来后面挂载vue组件

{

                 field: '',

                 title: '操作',

                 formatter: function(value, row, index) {

                     var id = "row"+row.id ;

                     var ans ="<div class='rowOperator' id="+id+"></div>";

                     return ans;

                 }

             },

2.定义vue组件

<script>

var editComponent = Vue.extend({

   template: "<div style='display:flex;'>" +

       "<button data-toggle='modal' data-target='#add-new-reseach' @click=edit(id) class='btn btn-success btn-xs'><i class='fa fa-pencil-square-o'></i>编辑</button>&nbsp;" +

       "<button data-toggle='modal' data-target='#add-new-reseach' @click=del(id) class='btn btn-danger btn-xs'><i class='fa fa-eye'></i>删除</button>" +

       "</div>",

   props:['id'],

   methods:{

       edit:function (id) {

           this.$bus.$emit('send', 1,id);

 

       },

       del:function (id) {

           this.$bus.$emit('send', 5,id);

       }

   }

});

</script>

 

3.在bootstrapTable成功加载的onLoadSuccess方法中挂载vue组件到上面的空标签中显示，$mount('#'+$(this).attr("id"))就是把上面的空标签替换成组件的标签：http://www.yayihouse.com/yayishuwu/chapter/2448