首頁 > web前端 > js教程 > 主體

使用Vue+jquery如何實現表格指定列的文字收縮

亚连
發布: 2018-06-12 17:24:43
原創
1518 人瀏覽過

這篇文章主要介紹了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,請轉頭看: //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){
    $(&#39;#&#39;+id).text(txt);
   }else{
    $(&#39;#&#39;+id).text(this.getShortStr(txt));
   }
  }

// getShortStr 方法
getShortStr(txt_origin) {
 if(txt_origin.length > 20){
  return txt_origin.substring(0,20);
 }else{
  return txt_origin;
 }
}
登入後複製

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

利用JS腳本載入後如何實作能執行對應回呼函數

利用vue webpack如何解決打包檔404頁面空白問題

透過webpack專案如何實現調試以及獨立打包設定檔(詳細教學)

以上是使用Vue+jquery如何實現表格指定列的文字收縮的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!