代码改变世界

【摸鱼神器】UI库秒变LowCode工具——列表篇(二)维护json的小工具

2022-06-10 08:34  金色海洋(jyk)  阅读(1102)  评论(4编辑  收藏  举报

上一篇介绍了一下如何实现一个可以依赖 json 渲染的列表控件,既然需要 json 文件,那么要如何维护这个 json 文件就成了重点,如果没有好的维护方案的话,那么还不如直接用UI库。

所以需要我们做一个维护 json 文件的小工具,维护 json 有多方法:

  • 最基础的方法就是手撸,显然这个是下下策。
  • 可以通过编辑器的插件来维护,不过这种方式针对所有 json,不会对某种需求做优化。
  • 或者做一套维护 json 的增删改查,这样可以维护 json 的每一个属性,只是实现起来比较繁琐。
  • 最后就是可视化 + 拖拽的方式,对于某些属性的修改,用起来会非常爽。

于是我们发扬一不怕苦,二不怕累的钻研精神,终于做了一个比较完美的小工具,可以非常方便的维护 json 文件。

小工具的功能

  • 通过拖拽的方式修改一部分属性。
  • 修改【列表】的属性。
  • 添加、修改【列】的属性。
  • 修改后立即重新渲染看效果。

修改的时候可以立即看到效果,json 对应的是组件的属性,更改后如果能够立即看到效果,显然更直观。

可视化 + 拖拽 + 手势 的方式修改属性

可以实现以下功能:

  • 表头和内容的对齐方式。
  • 调整列的先后顺序,交换两个列的位置。
  • 调整列宽
  • 移除列

优点是用起来比较爽,尤其是调整列的宽度、先后顺序的时候,非常直观、简单、快捷。
当然缺点也很明显,只能用于维护一部分属性,其他属性的维护还得做表单维护。

拖拽是动态的,图片表达不出来,所以录屏做个视频演示。

列表属性

我们可以基于 el-table 的属性做一个表单:

列表属性.png

修改表单的值,会立即刷新,可以实时查看属性变化后的效果。
也可以快速掌握 el-table 各个属性都是什么意思。

还可以用“抽屉”的方式维护列表属性

维护列表的属性

列的属性

我们可以基于 el-table-colmun 的属性做一个表单:

列属性.png

可以修改列的属性:

  • 对齐方式
  • 字段名、标签
  • 宽度
  • 固定列
  • 是否排序
  • 是否可以拖拽
  • 是否显示提示
  • class名称
  • 其他

还可以用 “抽屉”的方式维护列的属性

维护列的属性

导出

json 维护好之后需要导出的功能,这里提供了两种方式:

  • 作为 el-table 的属性,使用 v-bind="tableProps" 的方式绑定。

导出列表属性.png

  • json 文件的方式,可以用于渲染列表。

导出json格式的属性.png

  • 导出 json(得到 json 文件或者 js 对象)

导出 json

下面详细介绍一下。

实现方式

  • 使用 vue 的自定义指令,实现拖拽功能。
  • 使用表单实现其他属性的维护。

基本没啥技术含量,都是体力活,这里就不细说了,感兴趣的话,可以看源码。

源码

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

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

2