Vue-Easytable列寬拖動(dòng)效果修改
? ? ? ? 前一陣子俺們工地上來了幾批歪脖開發(fā)人員，在與他們嘮嗑過程中發(fā)現(xiàn)都在用一個(gè)叫Vue（讀音：上排牙齒咬著下嘴唇說“嗚優(yōu)”）的前端框架，說是易上手、功能全，用起來賊帶勁兒了，是目前國(guó)內(nèi)最火的前端框架。尤其是相比于Facebook的React（讀音：瑞愛科特）、Google的Angular（讀音：俺哥有了），作者是個(gè)中國(guó)人，使用起來無所顧忌(這是什么鬼邏輯？)。
? ? ? ? 俺一直想入坑歪脖前端，但又害怕搞不懂，問了個(gè)也在搞開發(fā)的同學(xué)Vue值不值得入坑，被鄙視了一番，好像俺是從哪個(gè)原始部落來的野蠻人，這么知名的東西都不知道，回復(fù)說“值，非常值，正適合你這種小白菜”。
? ? ? ? 好嘛，上網(wǎng)搜了搜資料，折騰了幾天，發(fā)現(xiàn)Vue果然對(duì)得起“上手容易、功能強(qiáng)大”這幾個(gè)字。剛好手上有點(diǎn)數(shù)據(jù)庫(kù)表，于是就想做個(gè)最俗套的小項(xiàng)目練練手——把數(shù)據(jù)顯示在表格上。對(duì)于俺這種“拿來主義”的奉行者，當(dāng)然要再找找有什么現(xiàn)成的表格插件啦，由于手上的數(shù)據(jù)不同字段的文本內(nèi)容長(zhǎng)短不一，發(fā)現(xiàn)用Vue寫的插件中，只有一個(gè)叫Vue-Easytable的東西支持列寬拖動(dòng)。經(jīng)過一番代(fu)碼(zhi)編(zhan)寫(tie)，麻溜的完工了，效果如下。
? ? ? ? 但俺馬上就發(fā)現(xiàn)這個(gè)插件的列寬拖動(dòng)效果有點(diǎn)別扭，與原來習(xí)慣了Word、Excel表格列拖動(dòng)效果有點(diǎn)區(qū)別。
? ? ? ? 可以看出，當(dāng)拖動(dòng)增加一列的寬度時(shí)，其他列的寬度不變，表格整體寬度增加，這時(shí)候在表格右側(cè)、下方出現(xiàn)了滾動(dòng)條，與表格極不諧調(diào)。當(dāng)縮小一列的寬度時(shí)，表格右側(cè)出現(xiàn)了一列空白區(qū)域，非常不好看。身為強(qiáng)迫癥的俺，自然是看不下去，想著使用量這么廣泛的表格插件應(yīng)該有現(xiàn)成的解決方法吧，查了它的API后發(fā)現(xiàn)沒有，這可咋整呢？以前沒寫過JavaScript（讀音：加娃四科瑞普特），只能硬著頭皮改啦。
? ? ? ? 首先當(dāng)然要找到拖動(dòng)列寬的效果在哪個(gè)文件中定義，翻了node_modules下的Vue-Easytable文件夾，發(fā)現(xiàn)在“vue-easytable\libs\v-table\src”文件夾下有個(gè)drag-width-mixin.js文件，名字都起的這么直白自然就是你了。打開看了看，大致了解一下列寬拖動(dòng)的原理。
? ? ? ? 第一個(gè)函數(shù)handleTitleMouseMove中找到用戶拖動(dòng)的是哪個(gè)列，并將它寫入全局變量this.draggingColumn中：this.draggingColumn = this.internalColumns.find(function (x) {return x.field === column;})，find這玩意兒的參數(shù)中套了個(gè)匿名函數(shù)，俺以前只搞過西佳佳，哪見過這種東東，可給俺整蒙了。后來整明白了，大致相當(dāng)于西佳佳中的函數(shù)參數(shù)，只不過那里傳入的是函數(shù)的地址，這里把整個(gè)函數(shù)都傳進(jìn)去了，這句話的意思是在internalColumns這個(gè)集合中，找到能使x.field === column成立的元素，就是俺們當(dāng)前拖動(dòng)的這列啦。
? ? ? ? 最后一個(gè)函數(shù)handlDragMouseUp中根據(jù)鼠標(biāo)up與開始down時(shí)的位置偏移，計(jì)算列寬新的大小。
var differ = this.draggingEndX - this.draggingStartX;
draggingColumn.width += differ;
? ? ? ? 改完draggingColumn的列寬后，看表格總寬度是否小于this.internalWidth，如果大于的話，就要整點(diǎn)幺蛾子：rightViewBody.style.overflowX = 'scroll';把這個(gè)難看的滾動(dòng)條顯示出來。所以俺第一件事當(dāng)然是把這句話注釋掉啦。
? ? ? ? 接下來俺引入了一個(gè)全局變量rightAdjacentColumn，用來保存當(dāng)前被拖動(dòng)的列的右邊那列。俺再來改第一個(gè)函數(shù)handleTitleMouseMove。如果被拖動(dòng)的列是最右邊那列，就直接返回，避免表格整體寬度縮小，如下圖。
? ? ? ? 再把找到draggingColumn的代碼改為如下所示。
? ? ? ? 然后修改最后一個(gè)函數(shù)handleDragMouseUp，大致意思為draggingColumn列寬增加了多少，它右邊的rightAdjacentColumn列寬就減少多少。
? ? ? ? 最后發(fā)現(xiàn)還是有點(diǎn)不對(duì)勁兒，需要修改setDragLinePosition這個(gè)函數(shù)，讓draggingColumn和rightAdjacentColumn的列寬不能小于最小值。
? ? ? ? 完事之后的最終效果如下。
? ? ? ? 終于完工啦，和Word、Excel中的表格效果一樣，把俺的強(qiáng)迫癥治好了?；叵胍幌缕鋵?shí)一大半的時(shí)間都花在讀代碼上了，弄懂每個(gè)變量和函數(shù)的意思后，改起來就不費(fèi)勁了，作為一個(gè)國(guó)產(chǎn)的主流框架，俺們還是要多多支持。不過鑒于俺的審美比較獨(dú)特，就不傳到github上去了。
? ? ? ? 改完后順眼多了，再加上這幾天工地上拿來了新的掃把，不再用以前的燒火棍掃地了，揮起掃把來呼呼的。接下來俺要把歪脖前端整明白，之后再搞搞后端，到時(shí)候俺也在村里開個(gè)培訓(xùn)班，帶領(lǐng)俺們屯里的老少爺們奔小康。
? ? ? ? 完結(jié)撒花！(*^__^*)
