国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue + jquery 實現表格指定列的文字收縮

heartFollower / 1920人閱讀

摘要:無奈,只能通過最笨的方法,給我們的定義,而且是不同的用獲取對應的元素比較基準方法方法搞定是搞定了,但是和的風格是不一樣的,混用體驗并不是很好,有好的方法請一定留言告訴我,必定送上一句謝謝

效果很簡單,但是寫起來真的不容易,因為Vue對于沒有React這種前端框架經驗的人是不友好的
(少吐槽,多工作,省下時間出去hi)

先說一下我走過的彎路:我之間想通過 v-if 指令去操作這一列
代碼是這樣的:

</>復制代碼

changeTxt 方法去改變 isAllTxt這個boolean 從而達到控制長短文字的顯示

額,然后每次點擊任意一行,這一列所有的文字都改變了
呃呃呃,這樣產品絕對不會答應的,你以為是上課全體起立么???

好,我們用原來jquery時代開發的經驗,在點擊事件中傳入 $(this) ,手動改dom
(前提是項目配置了jquery,請轉頭看:https://segmentfault.com/a/1190000007020623,上去,自己動。哦不,自己動手把它配好)
changeTxt($(this))

</>復制代碼

  1. changeTxt(ref) {
  2. ref.text(XXX);
  3. }

結果當然是錯誤:

那底下就有同學說是不是jquery導錯了???
當然也不是,這里的 this 并不是 domthis,是vuevm對象,不信的可以在方法中用jquery的 $ 試一下,并不是jquery的鍋。

那又有愛思考的小伙伴說我用直接用 this 可以么 ?
changeTxt(this)

得到的并不是當前元素的對象,這條路又不通。

那vue中是怎么得到元素的對象的呢???
給元素定義 ref

</>復制代碼

  1. {{getShortStr(scope.row.benchmark)}}

方法中通過 this.$refs["txt"].text(XXX) 改變dom,嗯?

引用返回的是什么 ??? 沒法操作啊 ,而且返回的這個標簽是表格最后一行的數據,哇,亂七八糟,爆炸。

無奈,只能通過最笨的方法,給我們的 span 定義 id ,而且是不同的 id ,用 jquery 獲取 id 對應的元素

</>復制代碼

  1. // changeTxt方法:
  2. changeTxt(txt,id) {
  3. this.isAllTxt = !this.isAllTxt;
  4. if(this.isAllTxt){
  5. $("#"+id).text(txt);
  6. }else{
  7. $("#"+id).text(this.getShortStr(txt));
  8. }
  9. }
  10. // getShortStr 方法
  11. getShortStr(txt_origin) {
  12. if(txt_origin.length > 20){
  13. return txt_origin.substring(0,20);
  14. }else{
  15. return txt_origin;
  16. }
  17. }

搞定是搞定了,但是 jqueryvue 的風格是不一樣的,混用體驗并不是很好,有好的方法請一定留言告訴我,必定送上一句 謝謝 !!!

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90762.html

相關文章

  • 六大布局之非常用布局

    摘要:六大布局之簡介表格布局是將子分別排列成行和列的布局,是由許多對象組成的,表格布局以行列的形式管理子控件,每一個單元是一個或者對象。 前言 Hi,大家好,新的一周開始啦,讓我們繼續遨游在Android的知識海洋中吧!上一次我們講到了RelativeLayout,相信不少小伙伴已經著手實戰,那么今天我們為大家帶來六大布局中剩下的三個布局。本篇文章可以和前面的FrameLayout一同歸類到...

    linkFly 評論0 收藏0
  • 一個通用的vue表格組件

    摘要:在做業務組件的時候需要自己自己封裝一個通用的表格,這個表格需要符合我們一切的好的幻想,左右固定,表頭固定,分頁,選擇,一直表格內容的行數限制等等,下面就為大家介紹一下這一款表格組件功能以及怎么使用。 在做業務組件的時候需要自己自己封裝一個通用的表格,這個表格需要符合我們一切的好的幻想,左右固定,表頭固定,分頁,選擇,一直表格內容的行數限制等等,下面就為大家介紹一下這一款表格組件功能以及...

    caoym 評論0 收藏0

發表評論

0條評論

heartFollower

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<