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

【摸鱼神器】UI库秒变LowCode工具——列表篇（二）维护json的小工具的更多相关文章

  1. Thief-Book 上班摸鱼神器

    Thief-Book 上班摸鱼神器 介绍 Thief-Book 是一款真正的摸鱼神器,可以更加隐秘性大胆的看小说. 隐蔽性 自定义透明背景,随意调整大小,完美融入各种软件界面 快捷性 三个快捷键,实现 ...

  2. vscode插件（摸鱼神器-小霸王游戏机

    vscode插件(摸鱼神器-小霸王游戏机 步骤 vscode扩展搜索小霸王,点击下载即可. 使用 默认有一个demo小游戏,即超级玛丽. 本地仓库 可以通过local菜单上的添加按钮添加本地nes r ...

  3. vue-cli3.0结合lib-flexible、px2rem实现移动端适配，完美解决第三方ui库样式变小问题

    公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible.px2rem实现移动端适配 ...

  4. 【转】让Chrome化身成为摸鱼神器，利用Chorme运行布卡漫画以及其他安卓APK应用教程

    下周就是十一了,无论是学生党还是工作党,大家的大概都会有点心不在焉,为了让大家更好的心不在焉,更好的在十一前最后一周愉快的摸鱼,今天就写一个如何让Chrome(google浏览器)运行安卓APK应用的 ...

  5. 【摸鱼神器】UCode Cms管理系统 内置超好用的代码生成器 解决多表连接痛点

    一.序言 UCode Cms管理系统是面向企业级应用软件开发的脚手架.当前版本1.3.4.快速体验: git clone https://gitee.com/decsa/demo-cms.git (一 ...

  6. 【摸鱼神器】基于SSM风格的Java源代码生成器 单表生成 一对一、一对多、多对多连接查询生成

    一.序言 UCode Cms 是一款Maven版的Java源代码生成器,是快速构建项目的利器.代码生成器模块属于可拆卸模块,即按需引入.代码生成器生成SSM(Spring.SpringBoot.Myb ...

  7. 如何使用第三方ui库vant-weapp

    如何使用第三方ui库vant-weapp 1==>创建文件夹demo 2==> 在小程序 中打开 注意 要先在小程序中打开 如果要想在小程序的开发工具中打开某一个 文件夹 要么是空文件夹 ...

  8. 重大发现： windows下C++ UI库 UI神器-SOUI(转载)

    转载:http://www.cnblogs.com/setoutsoft/p/4996870.html 在Windows平台上开发客户端产品是一个非常痛苦的过程,特别是还要用C++的时候.尽管很多语言 ...

  9. 转： windows下C++ UI库 UI神器-SOUI

    转:http://www.cnblogs.com/setoutsoft/p/4996870.html 前言 在Windows平台上开发客户端产品是一个非常痛苦的过程,特别是还要用C++的时候.尽管很多 ...

  10. 删库吧，Bug浪——我们在同一家摸鱼的公司

    那些口口声声, Bug越来越难写人的,应该盯着你们: 像我一样,我盯着你们,满眼恨意. IT积攒了几十年的漏洞, 所有的死机.溢出.404和超时, 像是专门为你们准备的礼物. 圈复杂度.魔鬼变量.内存 ...

随机推荐

  1. 逆向工程学习第二天--动手开发自己的第一个shellcode

    一个简单的c语言添加windows管理员账号的小程序,之前在渗透的时候经常用到,现在拿它来做自己的第一个shellcode. C代码: #pragma comment(lib, "netap ...

  2. interactivePopGestureRecognizer属性

    苹果一直都在人机交互中尽力做到极致,在iOS7中,新增加了一个小小的功能,也就是这个api:self.navigationController.interactivePopGestureRecogni ...

  3. C语言操作mysql

    php中 mysqli, pdo 可以用 mysqlnd 或 libmysqlclient 实现 前者 从 php 5.3.0起已内置到php中, 并且支持更多的特性,推荐用 mysqlnd mysq ...

  4. 将a、b的值进行交换，并且不使用任何中间变量

    方法1:用异或语句 a = a^b; b = a^b; a = a^b; 注:按位异或运算符^是双目运算符,其功能是参与运算的两数各对应的二进制位相异或,当对应的二进制相异时,结果为1.参与运算数仍以 ...

  5. MongoDB服务器启动异常 1067

    删掉mongod.lock文件就重启就可以了.

  6. cf C. Bits

    http://codeforces.com/contest/485/problem/C 利用位运算来解决这个题,从L开始,从每一位按位或,知道到达r位置,ans=ans|(1<<k);就可 ...

  7. 树莓派安装 dig命令

     apt-get install  dnsutils

  8. PHP7.0-PHP7.3新特性与变更

    到目前为止,PHP7发布已经升级到7.3,本文来总结一下每个版本的变更与新特性 PHP7.0 1. 组合比较符 (<=>) 组合比较符号用于比较两个表达式.当$a小于.等于或大于$b时它分 ...

  9. luogu 2154 离散化+杨辉三角+树状数组

    将纵向固定,每次在横向找两个点,计算其中间墓地的贡献答案,离散化后同一行的预处理个数, 树状数组内存储C[up[i]][k] * C[down[i][k] 的值,每次更新时 down[横坐标]++; ...

  10. [Linux]php+apache 和 php+nginx的区别

    apache是通过mod_php来解析php nginx是通过php-fpm(fast-cgi)来解析php1. PHP 解释器是否嵌入 Web 服务器进程内部执行mod_php 通过嵌入 PHP 解 ...