2
【摸鱼神器】UI库秒变LowCode工具——列表篇（二）维护json的小工具 - 金色海洋（jyk）
source link: https://www.cnblogs.com/jyk/p/16361878.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
上一篇介绍了一下如何实现一个可以依赖 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 的自定义指令，实现拖拽功能。
- 使用表单实现其他属性的维护。
基本没啥技术含量，都是体力活，这里就不细说了，感兴趣的话，可以看源码。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK