上一篇介绍了一下如何实现一个可以依赖 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