使用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