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中的deferred使用方法
Mar 27 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 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 版本]
2007/03/20 PHP
php 结果集的分页实现代码
2009/03/10 PHP
php抓取https的内容的代码
2010/04/06 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
基于javascript的拖拽类封装详解
2019/04/19 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
浅谈python中set使用
2016/06/30 Python
Python 中的lambda函数介绍
2018/10/10 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python正则表达式和元字符详解
2018/11/29 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
python3图片文件批量重命名处理
2019/10/31 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
分公司任命书
2014/06/06 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android