上一篇介紹了一下如何實現一個可以依賴 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 的自定義指令，實現拖拽功能。
• 使用表單實現其他屬性的維護。

基本沒啥技術含量，都是體力活，這裡就不細說了，感興趣的話，可以看原始碼。

原始碼

https://gitee.com/naturefw-code/nf-rollup-ui-controller

https://gitee.com/naturefw-code/nf-rollup-help