使用Vue+jquery如何實現表格指定列的文字收縮-js教程-PHP中文網

首頁

web前端

js教程

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

亚连

Jun 12, 2018 pm 05:24 PM

jquery vue

這篇文章主要介紹了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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7347

Java教學

1627

CakePHP 教程

1352

Laravel 教程

1265

PHP教程

1214

Related knowledge

vue中echarts怎麼用 May 09, 2024 pm 04:24 PM

在 Vue 中使用 ECharts 可讓應用程式輕鬆新增資料視覺化功能。具體步驟包括：安裝 ECharts 和 Vue ECharts 套件、引入 ECharts、建立圖表組件、配置選項、使用圖表組件、實現圖表與 Vue 資料的響應式、新增互動式功能，以及使用進階用法。

vue中的export default的作用 May 09, 2024 pm 06:48 PM

問題：Vue 中 export default 的作用是什麼？詳細描述：export default 定義元件的預設匯出。導入時，將自動導入組件。簡化導入流程，提高清晰度和防止衝突。常用於匯出單一元件、同時使用命名匯出和預設匯出以及註冊全域元件。

vue中map函數的用法 May 09, 2024 pm 06:54 PM

Vue.js map 函數是一個內建的高階函數，用於建立一個新數組，其中每個元素都是原始數組中的每個元素轉換後的結果。其語法為 map(callbackFn)，其中 callbackFn 接收數組中的每個元素作為第一個參數，可選地接收索引作為第二個參數，並傳回一個值。 map 函數不會改變原始陣列。

vue中event和$event區別 May 08, 2024 pm 04:42 PM

Vue.js 中，event 為原生 JavaScript 事件，由瀏覽器觸發，而 $event 是 Vue 特定抽象事件對象，在 Vue 元件中使用。一般使用 $event 更方便，因為它經過格式化和增強，支援資料綁定。當需要存取原生事件物件特定功能時，使用 event。

vue中onmounted作用 May 09, 2024 pm 02:51 PM

onMounted 是 Vue 中的元件掛載生命週期鉤子，其作用是在元件掛載到 DOM 後執行初始化操作，例如取得 DOM 元素的參考、設定資料、傳送 HTTP 請求、註冊事件監聽器等。它在元件掛載時僅呼叫一次，如果需要在元件更新後或銷毀前執行操作，可以使用其他生命週期鉤子。

vue中export與export default區別 May 08, 2024 pm 05:27 PM

Vue.js 中導出模組的方式有兩種：export 和 export default。 export用於匯出命名實體，需要使用花括號；export default用於匯出預設實體，不需要花括號。匯入時，export匯出的實體需要使用其名稱，而export default匯出的實體可以隱含使用。建議對於需要多次匯入的模組使用export default，對於只匯出一次的模組使用export。

vue中的鉤子是什麼 May 09, 2024 pm 06:33 PM

Vue 鉤子是可在特定事件或生命週期階段執行操作的回呼函數。它們包括生命週期鉤子（如 beforeCreate、mounted、beforeDestroy）、事件處理鉤子（如 click、input、keydown）和自訂鉤子。鉤子增強元件控制，回應元件生命週期，處理使用者互動並提高元件重複使用性。使用鉤子，定義鉤子函數、執行邏輯並傳回可選值即可。