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 extend()详解及简单实例
May 06 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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
图解上海144收音机
2021/03/02 无线电
PHP5 面向对象程序设计
2008/02/13 PHP
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
python+opencv识别图片中的圆形
2020/03/25 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
如何利用find命令查找文件
2016/11/18 面试题
大学生军训自我鉴定
2014/02/12 职场文书
财务担保书范文
2014/04/02 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
大学生村官考核材料
2014/05/23 职场文书
接收函格式
2015/01/30 职场文书