Vue-Easytable列宽拖动效果修改
前一阵子俺们工地上来了几批歪脖开发人员，在与他们唠嗑过程中发现都在用一个叫Vue（读音：上排牙齿咬着下嘴唇说“呜优”）的前端框架，说是易上手、功能全，用起来贼带劲儿了，是目前国内最火的前端框架。尤其是相比于Facebook的React（读音：瑞爱科特）、Google的Angular（读音：俺哥有了），作者是个中国人，使用起来无所顾忌(这是什么鬼逻辑？)。
俺一直想入坑歪脖前端，但又害怕搞不懂，问了个也在搞开发的同学Vue值不值得入坑，被鄙视了一番，好像俺是从哪个原始部落来的野蛮人，这么知名的东西都不知道，回复说“值，非常值，正适合你这种小白菜”。
好嘛，上网搜了搜资料，折腾了几天，发现Vue果然对得起“上手容易、功能强大”这几个字。刚好手上有点数据库表，于是就想做个最俗套的小项目练练手——把数据显示在表格上。对于俺这种“拿来主义”的奉行者，当然要再找找有什么现成的表格插件啦，由于手上的数据不同字段的文本内容长短不一，发现用Vue写的插件中，只有一个叫Vue-Easytable的东西支持列宽拖动。经过一番代(fu)码(zhi)编(zhan)写(tie)，麻溜的完工了，效果如下。
但俺马上就发现这个插件的列宽拖动效果有点别扭，与原来习惯了Word、Excel表格列拖动效果有点区别。
可以看出，当拖动增加一列的宽度时，其他列的宽度不变，表格整体宽度增加，这时候在表格右侧、下方出现了滚动条，与表格极不谐调。当缩小一列的宽度时，表格右侧出现了一列空白区域，非常不好看。身为强迫症的俺，自然是看不下去，想着使用量这么广泛的表格插件应该有现成的解决方法吧，查了它的API后发现没有，这可咋整呢？以前没写过JavaScript（读音：加娃四科瑞普特），只能硬着头皮改啦。
首先当然要找到拖动列宽的效果在哪个文件中定义，翻了node_modules下的Vue-Easytable文件夹，发现在“vue-easytable\libs\v-table\src”文件夹下有个drag-width-mixin.js文件，名字都起的这么直白自然就是你了。打开看了看，大致了解一下列宽拖动的原理。
第一个函数handleTitleMouseMove中找到用户拖动的是哪个列，并将它写入全局变量this.draggingColumn中：this.draggingColumn = this.internalColumns.find(function (x) {return x.field === column;})，find这玩意儿的参数中套了个匿名函数，俺以前只搞过西佳佳，哪见过这种东东，可给俺整蒙了。后来整明白了，大致相当于西佳佳中的函数参数，只不过那里传入的是函数的地址，这里把整个函数都传进去了，这句话的意思是在internalColumns这个集合中，找到能使x.field === column成立的元素，就是俺们当前拖动的这列啦。
最后一个函数handlDragMouseUp中根据鼠标up与开始down时的位置偏移，计算列宽新的大小。
var differ = this.draggingEndX - this.draggingStartX;
draggingColumn.width += differ;
改完draggingColumn的列宽后，看表格总宽度是否小于this.internalWidth，如果大于的话，就要整点幺蛾子：rightViewBody.style.overflowX = 'scroll';把这个难看的滚动条显示出来。所以俺第一件事当然是把这句话注释掉啦。
接下来俺引入了一个全局变量rightAdjacentColumn，用来保存当前被拖动的列的右边那列。俺再来改第一个函数handleTitleMouseMove。如果被拖动的列是最右边那列，就直接返回，避免表格整体宽度缩小，如下图。
再把找到draggingColumn的代码改为如下所示。
然后修改最后一个函数handleDragMouseUp，大致意思为draggingColumn列宽增加了多少，它右边的rightAdjacentColumn列宽就减少多少。
最后发现还是有点不对劲儿，需要修改setDragLinePosition这个函数，让draggingColumn和rightAdjacentColumn的列宽不能小于最小值。
完事之后的最终效果如下。
终于完工啦，和Word、Excel中的表格效果一样，把俺的强迫症治好了。回想一下其实一大半的时间都花在读代码上了，弄懂每个变量和函数的意思后，改起来就不费劲了，作为一个国产的主流框架，俺们还是要多多支持。不过鉴于俺的审美比较独特，就不传到github上去了。
改完后顺眼多了，再加上这几天工地上拿来了新的扫把，不再用以前的烧火棍扫地了，挥起扫把来呼呼的。接下来俺要把歪脖前端整明白，之后再搞搞后端，到时候俺也在村里开个培训班，带领俺们屯里的老少爷们奔小康。
完结撒花！(*^__^*)
