vue中使用bootstrapTable，但@click无效

浅浅的花香味﹌ 2023-07-06 13:04 4阅读 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"))就是把上面的空标签替换成组件的标签：[http://www.yayihouse.com/yayishuwu/chapter/2448][http_www.yayihouse.com_yayishuwu_chapter_2448]

[http_www.yayihouse.com_yayishuwu_chapter_2448]: http://www.yayihouse.com/yayishuwu/chapter/2448

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关解决Vue中@Click事件无效

实现的效果为当点击某个搜索的历史记录后，input框中就会有选中的文 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sha

Love The Way You Lie/ 2023年10月11日 14:54/ 0 赞/ 41 阅读

相关 vue @click.native和@click.stop和@click.self

参考一： vue @click.native 原生点击事件： 1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 `.nativ

冷不防/ 2023年10月11日 14:19/ 0 赞/ 52 阅读

相关 vue中使用bootstrapTable，但@click无效

vue和bootstrapTable结合使用@click无效解决方法： 1.在bootstrapTable生成每一行数据时先定义一个空的标签，用来后面挂载vue组件

浅浅的花香味﹌/ 2023年07月06日 13:04/ 0 赞/ 5 阅读

相关 BootstrapTable 中使用checkbox

BootstrapTable中使用CheckBox，添加checkbox列即可： columns: \[\{ checkbox: true

约定不等于承诺〃/ 2023年06月24日 13:23/ 0 赞/ 279 阅读

相关 vue中@click与@click.native，及其vue事件机制的分析

vue维护了自己的事件机制。所以就有了原生DOM事件和自定义事件的区别，比如下面这段官网原话。 > 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，

客官°小女子只卖身不卖艺/ 2022年12月28日 04:26/ 0 赞/ 248 阅读

相关 vue-seamless-scroll使用中遇到关于click的问题

使用vue-seamless-scroll实现数据无缝连续滚动 [https://blog.csdn.net/weixin\_43254676/article/deta

红太狼/ 2022年09月07日 15:54/ 0 赞/ 332 阅读

相关 vue @click.native和@click.stop和@click.self

参考一： vue @click.native 原生点击事件： 1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 `.nativ

叁歲伎倆/ 2022年02月02日 03:11/ 0 赞/ 434 阅读

相关 vue使用onblur无效

组件使用onblur无效时，使用@blur.native.capture=""来代替@blur。 @blur.native.capture="checkDataUni

约定不等于承诺〃/ 2021年09月28日 22:34/ 0 赞/ 932 阅读

相关 bootstrapTable的使用

一.参数配置 var $table; //初始化bootstrap-table的内容 function InitMai

深碍√TFBOYSˉ_/ 2021年09月15日 04:08/ 0 赞/ 724 阅读

相关追加的html代码使用jquery的click事件无效

追加的html代码使用jquery的click事件无效在动态增加的内容中包含点击按钮，但是通过jquery的click无法触发

朱雀/ 2020年07月02日 07:36/ 0 赞/ 868 阅读