源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[JavaScript] Vue+jquery实现表格指定列的文字收缩的示例代码

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2018-1-9 16:37:32 | 显示全部楼层 |阅读模式
这篇文章主要介绍了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://www.jb51.net/www.jb51.net/article/115161.htm,上去,自己动。哦不,自己动手把它配好)

changeTxt($(this))

changeTxt(ref) {
  ref.text(XXX);
}

结果当然是错误:

那底下就有同学说是不是jquery导错了???

当然也不是,这里的 this 并不是 dom 的 this,是vue的vm对象,不信的可以在方法中用jquery的 $ 试一下,并不是jquery的锅。

那又有爱思考的小伙伴说我用直接用 this 可以么 ?

changeTxt(this)

得到的并不是当前元素的对象,这条路又不通。

那vue中是怎么得到元素的对象的呢???

给元素定义 ref

<span ref="txt">{{getShortStr(scope.row.benchmark)}}</span>

方法中通过 this.$refs['txt'].text(XXX) 改变dom,嗯?

引用返回的是什么 ??? 没法操作啊 ,而且返回的这个标签是表格最后一行的数据,哇,乱七八糟,爆炸。

无奈,只能通过最笨的方法,给我们的 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 的风格是不一样的,混用体验并不是很好,有好的方法请一定留言告诉我,必定送上一句 谢谢 !!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

回复

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-10-13 06:10:23 | 显示全部楼层
了乐趣了去了去了去了去了
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-2-9 11:33:27 | 显示全部楼层
大家都不容易!
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

93

积分

注册会员

Rank: 2

积分
93
发表于 2023-6-24 00:07:17 | 显示全部楼层
这个源码不错啊
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

319

积分

中级会员

Rank: 3Rank: 3

积分
319
发表于 2023-7-8 23:44:57 | 显示全部楼层
哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

124

积分

注册会员

Rank: 2

积分
124
发表于 2023-8-16 18:27:17 | 显示全部楼层
挺不错的东西
回复 支持 反对

使用道具 举报

11

主题

2万

回帖

300

积分

中级会员

Rank: 3Rank: 3

积分
300
发表于 2023-8-23 20:54:20 | 显示全部楼层
66666666666666666666
回复 支持 反对

使用道具 举报

2

主题

1万

回帖

146

积分

注册会员

Rank: 2

积分
146
发表于 2023-9-13 14:47:40 | 显示全部楼层
大家都不容易!
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-3-3 16:56:07 | 显示全部楼层
老大你好你好好你好
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-5-11 13:49:58 | 显示全部楼层
论坛有你更精彩!
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2025-1-25 02:39 , Processed in 0.066684 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表