Vue+jquery實(shí)現(xiàn)表格指定列的文字收縮的示例代碼

本文介紹了Vue+jquery實(shí)現(xiàn)表格指定列的文字收縮的示例代碼，分享給大家，具體如下：

效果很簡(jiǎn)單，但是寫(xiě)起來(lái)真的不容易，因?yàn)閂ue對(duì)于沒(méi)有React這種前端框架經(jīng)驗(yàn)的人是不友好的
（少吐槽，多工作，省下時(shí)間出去hi）

先說(shuō)一下我走過(guò)的彎路：我之間想通過(guò) v-if 指令去操作這一列

代碼是這樣的：

<el-table-column width="250" align="center" label="比較基準(zhǔn)">
 <template scope="scope">
  <span v-if="isAllTxt">{{getShortStr(scope.row.benchmark)}}</span>
  <span v-else>{{scope.row.benchmark}}</span>
  <i @click="changeTxt"  class="el-icon-more"></i>
 </template> 
</el-table-column>

changeTxt 方法去改變 isAllTxt這個(gè)boolean 從而達(dá)到控制長(zhǎng)短文字的顯示

額，然后每次點(diǎn)擊任意一行，這一列所有的文字都改變了。呃呃呃，這樣產(chǎn)品絕對(duì)不會(huì)答應(yīng)的，你以為是上課全體起立么？？？

好，我們用原來(lái)jquery時(shí)代開(kāi)發(fā)的經(jīng)驗(yàn)，在點(diǎn)擊事件中傳入 $(this) ，手動(dòng)改dom

（前提是項(xiàng)目配置了jquery，請(qǐng)轉(zhuǎn)頭看：https://www.jb51.net/article/115161.htm，上去，自己動(dòng)。哦不，自己動(dòng)手把它配好）

changeTxt($(this))

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

結(jié)果當(dāng)然是錯(cuò)誤：

那底下就有同學(xué)說(shuō)是不是jquery導(dǎo)錯(cuò)了？？？

當(dāng)然也不是，這里的 this 并不是 dom 的 this，是vue的vm對(duì)象，不信的可以在方法中用jquery的 $ 試一下，并不是jquery的鍋。

那又有愛(ài)思考的小伙伴說(shuō)我用直接用 this 可以么 ？

changeTxt(this)

得到的并不是當(dāng)前元素的對(duì)象，這條路又不通。

那vue中是怎么得到元素的對(duì)象的呢？？？

給元素定義 ref

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

方法中通過(guò) this.$refs['txt'].text(XXX) 改變dom，嗯？

引用返回的是什么 ？？？ 沒(méi)法操作啊 ，而且返回的這個(gè)標(biāo)簽是表格最后一行的數(shù)據(jù)，哇，亂七八糟，爆炸。

無(wú)奈，只能通過(guò)最笨的方法，給我們的 span 定義 id ，而且是不同的 id ,用 jquery 獲取 id 對(duì)應(yīng)的元素

<el-table-column width="250" align="center" label="比較基準(zhǔn)"> 
 <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)"  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 的風(fēng)格是不一樣的，混用體驗(yàn)并不是很好，有好的方法請(qǐng)一定留言告訴我，必定送上一句 謝謝 ?。?！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。