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


Posted in jQuery onJanuary 09, 2018

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

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

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

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

代码是这样的:

<el-table-column width="250" align="center" label="比较基准">
 <template scope="scope">
  <span v-if="isAllTxt">{{getShortStr(scope.row.benchmark)}}</span>
  <span v-else>{{scope.row.benchmark}}</span>
  <i @click="changeTxt" style="margin-left:8px;color: #20a0ff;" class="el-icon-more"></i>
 </template> 
</el-table-column>

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

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

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

(前提是项目配置了jquery,请转头看:https://3water.com/article/115161.htm,上去,自己动。哦不,自己动手把它配好)

changeTxt($(this))

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

结果当然是错误:

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

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

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

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

changeTxt(this)

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

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

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

给元素定义 ref

<span ref="txt">{{getShortStr(scope.row.benchmark)}}</span>

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

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

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

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

<el-table-column width="250" align="center" label="比较基准"> 
 <template scope="scope">
   <span :id="scope.row.id">{{getShortStr(scope.row.benchmark)}}</span>
  <i v-if="scope.row.benchmark.length>20" @click="changeTxt(scope.row.benchmark,scope.row.id)" style="margin-left:8px;color: #20a0ff;" class="el-icon-more">
  </i>
 </template>
</el-table-column>

// 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 的风格是不一样的,混用体验并不是很好,有好的方法请一定留言告诉我,必定送上一句 谢谢 !!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jQuery实现简单全选框
Sep 13 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 #jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 #jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 #jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 #jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 #jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 #jQuery
jQuery中库的引用方法
Jan 06 #jQuery
You might like
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
php获取文件大小的方法
2014/02/26 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
Laravel find in set排序实例
2019/10/09 PHP
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
详解webpack分包及异步加载套路
2017/06/29 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
Python实现的txt文件去重功能示例
2018/07/07 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
详解Python中的测试工具
2019/06/09 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
Python json读写方式和字典相互转化
2020/04/18 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
党的群众路线学习材料
2014/05/16 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
计划生育工作汇报
2014/10/28 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫