上一篇介紹了一下如何實現一個可以依賴 json 渲染的列表控制元件，既然需要 json 檔案，那麼要如何維護這個 json 檔案就成了重點，如果沒有好的維護方案的話，那麼還不如直接用UI庫。
所以需要我們做一個維護 json 檔案的小工具，維護 json 有多方法：
- 最基礎的方法就是手擼，顯然這個是下下策。
- 可以通過編輯器的外掛來維護，不過這種方式針對所有 json，不會對某種需求做優化。
- 或者做一套維護 json 的增刪改查，這樣可以維護 json 的每一個屬性，只是實現起來比較繁瑣。
- 最後就是視覺化 + 拖拽的方式，對於某些屬性的修改，用起來會非常爽。
於是我們發揚一不怕苦，二不怕累的鑽研精神，終於做了一個比較完美的小工具，可以非常方便的維護 json 檔案。
小工具的功能
- 通過拖拽的方式修改一部分屬性。
- 修改【列表】的屬性。
- 新增、修改【列】的屬性。
- 修改後立即重新渲染看效果。
修改的時候可以立即看到效果，json 對應的是元件的屬性，更改後如果能夠立即看到效果，顯然更直觀。
視覺化 + 拖拽 + 手勢 的方式修改屬性
可以實現以下功能：
- 表頭和內容的對齊方式。
- 調整列的先後順序，交換兩個列的位置。
- 調整列寬
- 移除列
優點是用起來比較爽，尤其是調整列的寬度、先後順序的時候，非常直觀、簡單、快捷。
當然缺點也很明顯，只能用於維護一部分屬性，其他屬性的維護還得做表單維護。
拖拽是動態的，圖片表達不出來，所以錄屏做個視訊演示。
列表屬性
我們可以基於 el-table 的屬性做一個表單：
修改表單的值，會立即重新整理，可以實時檢視屬性變化後的效果。
也可以快速掌握 el-table 各個屬性都是什麼意思。
還可以用“抽屜”的方式維護列表屬性
列的屬性
我們可以基於 el-table-colmun 的屬性做一個表單：
可以修改列的屬性：
- 對齊方式
- 欄位名、標籤
- 寬度
- 固定列
- 是否排序
- 是否可以拖拽
- 是否顯示提示
- class名稱
- 其他
還可以用 “抽屜”的方式維護列的屬性
匯出
json 維護好之後需要匯出的功能，這裡提供了兩種方式：
- 作為 el-table 的屬性，使用
v-bind="tableProps"的方式繫結。
- json 檔案的方式，可以用於渲染列表。
- 匯出 json（得到 json 檔案或者 js 物件）
下面詳細介紹一下。
實現方式
- 使用 vue 的自定義指令，實現拖拽功能。
- 使用表單實現其他屬性的維護。
基本沒啥技術含量，都是體力活，這裡就不細說了，感興趣的話，可以看原始碼。