vue如何做到在表格单元中实现文字提醒
1个回答
展开全部
效果很简单,但是写起来真的不容易,因为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://segmentfault.com/a/1190000007020623,上去,自己动。哦不,自己动手把它配好)
changeTxt($(this))
(少吐槽,多工作,省下时间出去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://segmentfault.com/a/1190000007020623,上去,自己动。哦不,自己动手把它配好)
changeTxt($(this))
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询