vue+element自定义表格遇到的问题

使用vue+element实现了一个自定义的表格，需求如下：

看似简单的功能实现起来有些细节真的不好处理

1.点击编辑实现可编辑标题，这个地方纯粹用的js的DOM操作，官网上只提供了方法handleClick，但是没有举例具体怎么实现，用element的属性或者方法没有办法实现，所以只能操作dom，给展示标题的div添加contenteditable：true属性，还有一种方法就是将表格的标题栏使用el-input type='text' 来展示，给input使用:disable='edit'来控制是否可编辑

2.小数、排序、合计、启用这些列都是在表格中嵌套了其他的模块，所以要用table里面的自定义列来实现

这里实现一个表格不难，难的是如何让下来框选出来的值成为最终这个单元格的pop值，也就是要传到后台的值，这里是借鉴了form中的传值方法，所以想到了在el-select的v-model中使用tableData.num的想法，但是表格有多行，所以使用[scope.$index]来区分不同的行

3.开关的开启和关闭的传值

思路和上面的下拉框是一样的，但是这里有个问题，开关有三行三列，要实现点击某个开关的时候只有当前开关开启关闭，不会影响到其他的开关，所以如果不考虑向后台传开关的值，这里switch的v-model的设置应该是

data的设置

这里给value1赋值的时候要用vm.value1,不能直接使用this.value1.length=data.data.length;以为value1初始值为空数组

用set也不行

4.移动行

实现的思路是使用了数组的splice方法，使用element的好处就是可以方便的拿到row、index这样的值，有了index，可以在点击上下箭头的时候改变tableData中元素的顺序，所以使用了splice

向下移动也是一样的道理，只是改变了方向

5.移动上下行的时候，给当前移动的行添加一个活动的状态，就像选项卡的状态一样，原来是想给箭头添加一个蓝色，但是因为换行实现的思路是调换上下行的数据的位置，所以每次点击箭头后都会重新展示tableData，相当于重新加载数据，所以要记住箭头的颜色很难实现，所以这里换成了移动某一行的时候给当前行添加背景颜色，就是根据js选项卡的原理实现的

6.自定义表单中比较复杂的地方是后台返回的排序、合计、启用的值是1、0，所以要将1、0转换成true/false,如果在checkbox里面使用:checked来转换的话，那么在保存后不会记住默认的状态，所以使用computed将获取到的数据转换后再展示，

需要转换的数据在计算的时候进行转换，

这样在保存后就不会有bug了。

保存的时候后台要的是1、0，所以还要将得到的true、false再转成1、0