Vue+jquery实现表格指定列的文字收缩的示例代码

本文介绍了Vue+jquery实现表格指定列的文字收缩的示例代码，分享给大家，具体如下：

我们一直强调网站制作、网站建设对于企业的重要性,如果您也觉得重要,那么就需要我们慎重对待,选择一个安全靠谱的网站建设公司,企业网站我们建议是要么不做，要么就做好,让网站能真正成为企业发展过程中的有力推手。专业网站建设公司不一定是大公司,创新互联建站作为专业的网络公司选择我们就是放心。

效果很简单，但是写起来真的不容易，因为Vue对于没有React这种前端框架经验的人是不友好的
（少吐槽，多工作，省下时间出去hi）

先说一下我走过的弯路：我之间想通过 v-if 指令去操作这一列

代码是这样的：

changeTxt 方法去改变 isAllTxt这个boolean 从而达到控制长短文字的显示

额，然后每次点击任意一行，这一列所有的文字都改变了。呃呃呃，这样产品绝对不会答应的，你以为是上课全体起立么？？？

好，我们用原来jquery时代开发的经验，在点击事件中传入 $(this) ，手动改dom

（前提是项目配置了jquery，请转头看：https://www.jb51.net/article/115161.htm，上去，自己动。哦不，自己动手把它配好）

changeTxt($(this))

changeTxt(ref) {
  ref.text(XXX);
}

结果当然是错误：

那底下就有同学说是不是jquery导错了？？？

当然也不是，这里的 this 并不是 dom 的 this，是vue的vm对象，不信的可以在方法中用jquery的 $ 试一下，并不是jquery的锅。

那又有爱思考的小伙伴说我用直接用 this 可以么 ？

changeTxt(this)

得到的并不是当前元素的对象，这条路又不通。

那vue中是怎么得到元素的对象的呢？？？

给元素定义 ref

{{getShortStr(scope.row.benchmark)}}

方法中通过 this.$refs['txt'].text(XXX) 改变dom，嗯？

引用返回的是什么 ？？？ 没法操作啊 ，而且返回的这个标签是表格最后一行的数据，哇，乱七八糟，爆炸。

无奈，只能通过最笨的方法，给我们的 span 定义 id ，而且是不同的 id ,用 jquery 获取 id 对应的元素

 
 


// changeTxt方法：
  changeTxt(txt,id) {
   this.isAllTxt = !this.isAllTxt;
   if(this.isAllTxt){
    $('#'+id).text(txt);
   }else{
    $('#'+id).text(this.getShortStr(txt));
   }
  }

// getShortStr 方法
getShortStr(txt_origin) {
 if(txt_origin.length > 20){
  return txt_origin.substring(0,20);
 }else{
  return txt_origin;
 }
}

搞定是搞定了，但是 jquery 和 vue 的风格是不一样的，混用体验并不是很好，有好的方法请一定留言告诉我，必定送上一句 谢谢 ！！！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。