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获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery实现聊天对话框
Feb 08 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
mysql5详细安装教程
2007/01/15 PHP
Discuz 模板引擎的封装类代码
2008/07/18 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
php写的简易聊天室代码
2011/06/04 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
python logging日志模块的详解
2017/10/29 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
python 美化输出信息的实例
2018/10/15 Python
python 创建一维的0向量实例
2019/12/02 Python
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
访谈节目策划方案
2014/05/15 职场文书
主题团日活动总结
2014/06/25 职场文书
年终工作总结范文2014
2014/11/27 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers