码上敲享录 > vue.js常见问题详解 > vue和bootstrapTable结合使用@click无效

vue和bootstrapTable结合使用@click无效

上一章章节目录下一章 2020-02-18已有1615人阅读 评论(0)

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"))就是把上面的空标签替换成组件的标签

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);//行的数据

     })

}

getRowByUniqueId的使用请参考:http://www.yayihouse.com/yayishuwu/chapter/2447


0

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交