【摸鱼神器】UI库秒变LowCode工具——列表篇（二）维护json的小工具
2022-06-10 08:34 金色海洋（jyk） 阅读(1107) 评论(4) 编辑 收藏 举报上一篇介绍了一下如何实现一个可以依赖 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 的自定义指令，实现拖拽功能。
- 使用表单实现其他属性的维护。
基本没啥技术含量，都是体力活，这里就不细说了，感兴趣的话，可以看源码。
