一、问题:

      最近在使用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元素的列顺序对应

 

Vue2.x与bootsrap-table动态添加元素和绑定事件无效的更多相关文章

  1. jQuery动态添加元素并绑定事件

    写网页的时候常常需要根据实际情况添加新的元素,然后这些新元素还需要绑定已有的事件,如:有一ul,点击其中某 li,根据其 id 或 value 等获取新的数据列表,并新建 ul 显示,新 ul 中的 ...

  2. jQuery1.9及其以上版本中动态元素on绑定事件无效解决方案

    jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替.本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数 ...

  3. JQ动态生成节点绑定事件无效问题

    最近做项目的时候遇见了一个问题,通过jq将动态节点绑定到dom节点上,并且为动态节点绑定方法,此方法再次为动态节点添加动态节点,但在刷新之后,动态节点上的方法失效了,过程为:创建动态节点->动态 ...

  4. jquery 动态创建的元素,绑定事件无效之解决方法

    今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...

  5. 关于动态生成dom绑定事件失效的原因

    之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试 ...

  6. Jquery 在动态元素上绑定事件

    弄了很久却没有弄出来,感觉没有错,但是动态元素上的事件根本就不响应,代码如下: <input type="button" id="btnyes" valu ...

  7. 关于 js 动态生成html 绑定事件失效的问题

    在实际问题中,也只到使用新版jq 的on 事件 进行动态元素的绑定: 是这样 (但是依然没有效果——): $('dom节点').on('click',function(){}) 之后经过查阅发现:正确 ...

  8. 【前端】vue2.x 配合 bootstrapTable 动态添加元素和绑定点击事件,事件无效 解决

    背景: 使用bootstrap-table 表格插件时,每一行的最后一班会加操作按钮列.如果不加入vue的话,使用插件自己的列属性formatter:function(value, row, inde ...

  9. jQuery使用on()绑定动态生成元素的事件无效

    jquery on()方法是jquery1.7+后才使用的 由于需求:动态添加了以下代码 <tr class="pj" data-val="no"> ...

随机推荐

  1. libevent::实现的低级 socket

    LibEvent 实现的低级 ROT13 例子 #include <cstdio> #include <netinet/in.h> #include <sys/socke ...

  2. Libevent::evhttp服务器下载

    void http_handler_Get_Download(struct evhttp_request *req, void *arg) { if (req == NULL) { return; } ...

  3. Redis 集群搭建(基于Linux)

    一.基础环境 1.虚拟机 VMware 15.x 2.Linux系统,用的是Centos7的Linux系统 3.Redis数据库版本 5.0.3 二.Redis集群简介 1.背景 Redis在3.0版 ...

  4. Go中http超时问题的排查

    背景 排查 推测 连接超时 疑问 http2 解决超时 并发连接数 服务端限制 真相 重试 解决办法 问题1 背景 最新有同事反馈,服务间有调用超时的现象,在业务高峰期发生的概率和次数比较高.从日志中 ...

  5. 图片放大缩小插件 zoom.js 怎么用

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf ...

  6. selenium学习-拖拽页面元素

    一.ActionChains包 模拟鼠标的操作要首先引入ActionChains的包 from selenium.webdriver.common.action_chains import Actio ...

  7. Django之多对多表之through第三张表之InlineModelAdmin后台内嵌

    话不多说,来看表结构 这里有两个表,一个是阶段表,一个是老师表,一个老师可以带多个阶段,一个阶段也可以由多个老师带,所以是多对多关系 # 阶段表 class Stage(models.Model): ...

  8. SpringCloud之Zuul过滤器实现登录鉴权实战(十一)

    自定义zuul过滤器实现登录鉴权实战 1.新建filter包 2.新建类继承ZuulFilter,重写方法 3.在类顶部加注解@Comment让spring扫描 /** * @author WGR * ...

  9. Token refresh的实现

    实现原理: 在access_token里加入refresh_token标识,给access_token设置短时间的期限(例如一天),给refresh_token设置长时间的期限(例如七天).当活动用户 ...

  10. 虚拟环境:virtualenv与virtualenvwrapper

    前言: 在使用 Python 开发的过程中,工程一多,难免会碰到不同的工程依赖不同版本的库的问题: 亦或者是在开发过程中不想让物理环境里充斥各种各样的库,引发未来的依赖灾难. 此时,我们需要对于不同的 ...