資訊專欄INFORMATION COLUMN
摘要：無(wú)奈，只能通過(guò)最笨的方法，給我們的定義，而且是不同的用獲取對(duì)應(yīng)的元素比較基準(zhǔn)方法方法搞定是搞定了，但是和的風(fēng)格是不一樣的，混用體驗(yàn)并不是很好，有好的方法請(qǐng)一定留言告訴我，必定送上一句謝謝
效果很簡(jiǎn)單，但是寫起來(lái)真的不容易，因?yàn)閂ue對(duì)于沒(méi)有React這種前端框架經(jīng)驗(yàn)的人是不友好的
（少吐槽，多工作，省下時(shí)間出去hi）
先說(shuō)一下我走過(guò)的彎路：我之間想通過(guò) v-if 指令去操作這一列
代碼是這樣的：
{{getShortStr(scope.row.benchmark)}} {{scope.row.benchmark}}
changeTxt 方法去改變 isAllTxt這個(gè)boolean 從而達(dá)到控制長(zhǎng)短文字的顯示
額，然后每次點(diǎn)擊任意一行，這一列所有的文字都改變了
呃呃呃，這樣產(chǎn)品絕對(duì)不會(huì)答應(yīng)的，你以為是上課全體起立么？？？
好，我們用原來(lái)jquery時(shí)代開發(fā)的經(jīng)驗(yàn)，在點(diǎn)擊事件中傳入 $(this) ，手動(dòng)改dom
（前提是項(xiàng)目配置了jquery，請(qǐng)轉(zhuǎn)頭看：https://segmentfault.com/a/1190000007020623，上去，自己動(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
{{getShortStr(scope.row.benchmark)}}
方法中通過(guò) this.$refs["txt"].text(XXX) 改變dom，嗯？
引用返回的是什么 ？？？ 沒(méi)法操作啊 ，而且返回的這個(gè)標(biāo)簽是表格最后一行的數(shù)據(jù)，哇，亂七八糟，爆炸。
無(wú)奈，只能通過(guò)最笨的方法，給我們的 span 定義 id ，而且是不同的 id ,用 jquery 獲取 id 對(duì)應(yīng)的元素
{{getShortStr(scope.row.benchmark)}} // 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)一定留言告訴我，必定送上一句 謝謝 ！?。?/p>
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90762.html
摘要：六大布局之簡(jiǎn)介表格布局是將子分別排列成行和列的布局，是由許多對(duì)象組成的，表格布局以行列的形式管理子控件，每一個(gè)單元是一個(gè)或者對(duì)象。 前言 Hi，大家好，新的一周開始啦，讓我們繼續(xù)遨游在Android的知識(shí)海洋中吧！上一次我們講到了RelativeLayout，相信不少小伙伴已經(jīng)著手實(shí)戰(zhàn)，那么今天我們?yōu)榇蠹規(guī)?lái)六大布局中剩下的三個(gè)布局。本篇文章可以和前面的FrameLayout一同歸類到...
摘要：在做業(yè)務(wù)組件的時(shí)候需要自己自己封裝一個(gè)通用的表格，這個(gè)表格需要符合我們一切的好的幻想，左右固定，表頭固定，分頁(yè)，選擇，一直表格內(nèi)容的行數(shù)限制等等，下面就為大家介紹一下這一款表格組件功能以及怎么使用。 在做業(yè)務(wù)組件的時(shí)候需要自己自己封裝一個(gè)通用的表格，這個(gè)表格需要符合我們一切的好的幻想，左右固定，表頭固定，分頁(yè)，選擇，一直表格內(nèi)容的行數(shù)限制等等，下面就為大家介紹一下這一款表格組件功能以及...
閱讀 968·2023-04-25 23:50
閱讀 2002·2021-11-19 09:40
閱讀 613·2019-08-30 13:50
閱讀 2742·2019-08-29 17:11
閱讀 1054·2019-08-29 16:37
閱讀 2998·2019-08-29 12:54
閱讀 2808·2019-08-28 18:17
閱讀 2652·2019-08-26 16:55
