摘要：无奈，只能通过最笨的方法，给我们的定义，而且是不同的用获取对应的元素比较基准方法方法搞定是搞定了，但是和的风格是不一样的，混用体验并不是很好，有好的方法请一定留言告诉我，必定送上一句谢谢
效果很简单，但是写起来真的不容易，因为Vue对于没有React这种前端框架经验的人是不友好的
（少吐槽，多工作，省下时间出去hi）
先说一下我走过的弯路：我之间想通过 v-if 指令去操作这一列
代码是这样的：
{{getShortStr(scope.row.benchmark)}} {{scope.row.benchmark}}
changeTxt 方法去改变 isAllTxt这个boolean 从而达到控制长短文字的显示
额，然后每次点击任意一行，这一列所有的文字都改变了
呃呃呃，这样产品绝对不会答应的，你以为是上课全体起立么？？？
好，我们用原来jquery时代开发的经验，在点击事件中传入 $(this) ，手动改dom
（前提是项目配置了jquery，请转头看：https://segmentfault.com/a/1190000007020623，上去，自己动。哦不，自己动手把它配好）
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 对应的元素
{{getShortStr(scope.row.benchmark)}} // 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 的风格是不一样的，混用体验并不是很好，有好的方法请一定留言告诉我，必定送上一句 谢谢 ！！！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/90762.html
摘要：六大布局之简介表格布局是将子分别排列成行和列的布局，是由许多对象组成的，表格布局以行列的形式管理子控件，每一个单元是一个或者对象。 前言 Hi，大家好，新的一周开始啦，让我们继续遨游在Android的知识海洋中吧！上一次我们讲到了RelativeLayout，相信不少小伙伴已经着手实战，那么今天我们为大家带来六大布局中剩下的三个布局。本篇文章可以和前面的FrameLayout一同归类到...
摘要：在做业务组件的时候需要自己自己封装一个通用的表格，这个表格需要符合我们一切的好的幻想，左右固定，表头固定，分页，选择，一直表格内容的行数限制等等，下面就为大家介绍一下这一款表格组件功能以及怎么使用。 在做业务组件的时候需要自己自己封装一个通用的表格，这个表格需要符合我们一切的好的幻想，左右固定，表头固定，分页，选择，一直表格内容的行数限制等等，下面就为大家介绍一下这一款表格组件功能以及...
阅读 942·2023-04-25 23:50
阅读 1915·2021-11-19 09:40
阅读 543·2019-08-30 13:50
阅读 2701·2019-08-29 17:11
阅读 1026·2019-08-29 16:37
阅读 2965·2019-08-29 12:54
阅读 2778·2019-08-28 18:17
阅读 2609·2019-08-26 16:55
