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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jquery插件实现悬浮的菜单
Apr 24 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
php5.5中类级别的常量使用介绍
2013/10/02 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
Pycharm中如何关掉python console
2020/10/27 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
校园安全检查制度
2014/02/03 职场文书
奥林匹克的口号
2014/06/13 职场文书
我的长征观后感
2015/06/09 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript