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 相关文章推荐
基于jQuery实现瀑布流页面
Apr 11 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 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中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
用python处理MS Word的实例讲解
2018/05/08 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
ET Mall东森购物网:东森严选
2017/03/06 全球购物
2013英文求职信模板范文
2013/11/15 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
护士个人总结范文
2015/02/13 职场文书
2015年财务部工作总结
2015/04/10 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
一文搞懂Redis中String数据类型
2022/04/03 Redis