一、问题:

      最近在使用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. 关于vue使用的一些小经验

    这一年来说,vue的势头很猛,用户量“噌”“噌”“噌”的涨 为了不掉队不落伍.在后台大哥的胁迫下,不得不选择用了它 刚开始很难接受vue的写法,在编辑器里很容易报错,基本上每行都会出现红色的波浪线 这 ...

  2. RIDE的External Resources

    External Resources(外部资源):主要指不在project管辖范围内的资源文件. 通俗来说,如果是目录的project,只要不在自己目录范围内的资源文件都算外部资源:如果是文件的pro ...

  3. 通过FeignClient接收shaded的javabean的JSON序列化

    问题说明 最近做了关于flink的需求. 现在需要通过HTTP访问FLINK的 RESTAPI, rest 接口的JSON 非常庞大而复杂. 那么怎么去完整的接收数据呢? 方法一就是手写部分需要的Ja ...

  4. linux下安装配置svn服务器

    linux下安装配置svn服务器 1. svn服务器安装 将subversion-1.4.0.tar.gz和subversion-deps-1.4.0.tar.gz传到服务器. tar xfvz su ...

  5. day07整理(内置方法\循环判断)

    目录 一.上节课回顾 (一)if判断 1.单分支结构 2.双分支结构 3.多分支结构 (二)for循环 1.for + break 2.for + continue 3.for循环嵌套 (三)robu ...

  6. PowerBI开发 第十五篇:Power BI的行级安全

    Power BI支持行级安全(Row-Level Security,RLS)的权限控制,用于限制用户对Dashboard.报表和DataSet的访问.用户浏览的报表是相同的,但是看到的数据却是不同的. ...

  7. Hibernate 查询方式、JPA查询方式

    hibernate 查询方式: OID 查询 对象导航查询 HQL 方式查询 QBC方式查询 原生SQL方式查询 JPA 查询方式: OID 查询 对象导航查询 JPQL 方式查询 CriteriaB ...

  8. plsql + instantclient 连接oracle ( 超简单)

    1.instantclient 下载并解压 instantclient 下载地址 https://www.oracle.com/technetwork/cn/database/features/ins ...

  9. Flask:Flask中使用会话技术

    1.会话技术cookie和session (1)cookie 在网站中,HTTP请求是无状态的.也就是说,即使第一次用户访问服务器并登录成功后,第二次请求服务器依然不知道当前发起请求的是哪个用户.co ...

  10. Educational Codeforces Round 71 (Rated for Div. 2)E. XOR Guessing

    一道容斥题 如果直接做就是找到所有出现过递减的不同排列,当时硬钢到自闭,然后在凯妹毁人不倦的教导下想到可以容斥做,就是:所有的排列设为a,只考虑第一个非递减设为b,第二个非递减设为c+两个都非递减的情 ...