摘要:無奈,只能通過最笨的方法,給我們的定義,而且是不同的用獲取對應的元素比較基準方法方法搞定是搞定了,但是和的風格是不一樣的,混用體驗并不是很好,有好的方法請一定留言告訴我,必定送上一句謝謝
效果很簡單,但是寫起來真的不容易,因為Vue對于沒有React這種前端框架經驗的人是不友好的
(少吐槽,多工作,省下時間出去hi)
先說一下我走過的彎路:我之間想通過 v-if 指令去操作這一列
代碼是這樣的:
</>復制代碼
changeTxt 方法去改變 isAllTxt這個boolean 從而達到控制長短文字的顯示
額,然后每次點擊任意一行,這一列所有的文字都改變了
呃呃呃,這樣產品絕對不會答應的,你以為是上課全體起立么???
好,我們用原來jquery時代開發的經驗,在點擊事件中傳入 $(this) ,手動改dom
(前提是項目配置了jquery,請轉頭看:https://segmentfault.com/a/1190000007020623,上去,自己動。哦不,自己動手把它配好)
changeTxt($(this))
</>復制代碼
changeTxt(ref) {
ref.text(XXX);
}
結果當然是錯誤:
那底下就有同學說是不是jquery導錯了???
當然也不是,這里的 this 并不是 dom 的 this,是vue的vm對象,不信的可以在方法中用jquery的 $ 試一下,并不是jquery的鍋。
那又有愛思考的小伙伴說我用直接用 this 可以么 ?
changeTxt(this)
得到的并不是當前元素的對象,這條路又不通。
那vue中是怎么得到元素的對象的呢???
給元素定義 ref
</>復制代碼
{{getShortStr(scope.row.benchmark)}}
方法中通過 this.$refs["txt"].text(XXX) 改變dom,嗯?
引用返回的是什么 ??? 沒法操作啊 ,而且返回的這個標簽是表格最后一行的數據,哇,亂七八糟,爆炸。
無奈,只能通過最笨的方法,給我們的 span 定義 id ,而且是不同的 id ,用 jquery 獲取 id 對應的元素
</>復制代碼
// 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 的風格是不一樣的,混用體驗并不是很好,有好的方法請一定留言告訴我,必定送上一句 謝謝 !!!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90762.html
摘要:六大布局之簡介表格布局是將子分別排列成行和列的布局,是由許多對象組成的,表格布局以行列的形式管理子控件,每一個單元是一個或者對象。 前言 Hi,大家好,新的一周開始啦,讓我們繼續遨游在Android的知識海洋中吧!上一次我們講到了RelativeLayout,相信不少小伙伴已經著手實戰,那么今天我們為大家帶來六大布局中剩下的三個布局。本篇文章可以和前面的FrameLayout一同歸類到...
摘要:在做業務組件的時候需要自己自己封裝一個通用的表格,這個表格需要符合我們一切的好的幻想,左右固定,表頭固定,分頁,選擇,一直表格內容的行數限制等等,下面就為大家介紹一下這一款表格組件功能以及怎么使用。 在做業務組件的時候需要自己自己封裝一個通用的表格,這個表格需要符合我們一切的好的幻想,左右固定,表頭固定,分頁,選擇,一直表格內容的行數限制等等,下面就為大家介紹一下這一款表格組件功能以及...
閱讀 961·2023-04-25 23:50
閱讀 1972·2021-11-19 09:40
閱讀 602·2019-08-30 13:50
閱讀 2732·2019-08-29 17:11
閱讀 1049·2019-08-29 16:37
閱讀 2992·2019-08-29 12:54
閱讀 2799·2019-08-28 18:17
閱讀 2643·2019-08-26 16:55