Vue jquery实现表中指定列文本收缩的示例代码

介绍了Vue jquery实现表中指定列的文本收缩的示例代码，并与大家分享如下：

效果很简单，但是写起来真的不容易，因为Vue对没有React前端框架经验的人不友好(少吐槽，多干活，省时间出门)

我来说说我走过的弯路：我想通过v-if指令来操作这个栏目

代码是这样的：

El-table-列宽=' 250 ' align=' center ' label=' benchmark ' template scope=' scope ' span v-if=' isalltxt ' {get游击手(scope。row . benchmark)} }/span span v-else { { scope . row . benchmark } }/span I @ click=' changeTxt ' style=' margin-left :8 px；color : # 20a 0 ff；'class=' El-icon-more '/I/template/El-table-columntchangetxt方法更改isAllTxt布尔值，从而控制长短文本的显示

嗯，每次你点击任何一行，这个栏里的所有单词都会改变。呃，呃，呃，这个产品永远不会被接受。你认为每个人在课堂上都站起来吗？

好的，我们使用jquery时代的开发经验在click事件中传入$(this)并手动更改dom

(在项目配置jquery的前提下，请转过头看：//www . JB 51 . net/article/115161 . htm，自己上去搬。哦不，你自己搭配吧)

changeTxt($(this))

changeTxt(ref){ ref . text(XXX)；}结果当然是错误的：

然后，底下有同学说jquery引错了我。

当然不是。这里不是dom的这个，而是vue的vm对象。不信的话，可以在方法里用$ of jquery试试，不要jquery的锅。

另一位贴心的小伙伴说，这个可以直接用吗？

changeTxt(这个)

你得到的不是当前元素的对象，这条路被堵死了。

如何在vue中获取元素的对象？

为元素定义引用

in span ref=' txt ' {get游击手(作用域。row.benchmark)}}/span方法，dom被此更改。$refs['txt']。文字(XXX)，嗯？

引用返回什么？我不会操作，返回的标签是表最后一行的数据。哇，一团糟，而且爆炸了。

无奈，我们只能用最愚蠢的方式为自己的跨度定义本我，而且是不同的本我。用jquery获取id的对应元素

El-table-列宽=' 250 ' align=' center ' label=' benchmark ' template scope=' scope ' span : id=' scope . row . id ' {get游击手(scope . row . benchmark)} }/span I v-if=' scope . row . benchmark . length 20 ' @ click=' changeTxt(scope . row . benchmark，scope . row . id)' style=' margin-left 33608 px；color : # 20a 0 ff；'class=' El-icon-more '/I/template/El-table-column//changetxt方法：changetxt (txt，id) {this.isalltxt=！this.isAllTxtif(this . isalltxt){ $(“#”id)。文本(txt)；} else { $(“#”id)。text(this .get游击手(txt))；} }//get游击手方法get游击手(txt _ origin){ if(txt _ origin . length 20){ return txt _ origin . substring(0，20)；} else { return txt _ origin}}做了，但是jquery和vue的风格不一样，混合的体验不是很好。请留言告诉我有没有好办法，一定要给我发个谢谢！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。