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> " +
"<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"))就是把上面的空标签替换成组件的标签
onLoadSuccess:function () {
$(".rowOperator").each(function () {
var idTemp = $(this).attr("id");// row+id
new editComponent({propsData: {id : idTemp.substring(3)}}).$mount('#'+$(this).attr("id"));
});
},
4. 组件中的this.$bus.$emit('send', 1,id);是向bootstrapTable所在的vue组件传值，bootstrapTable所在的vue组件在mounted方法中监听
mounted () {
//监听组件的信息，通过传过来的id获取当前行所有数据
this.$bus.$on('send', (status,id)=> {
var form = this.table.bootstrapTable('getRowByUniqueId',id);//行的数据
})
}
服务热线 19970861797
