上一篇介绍了一下如何实现一个可以依赖 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. 【摸鱼神器】UI库秒变LowCode工具——列表篇(一)设计与实现

    内容摘要: 需求分析 定义 interface 定义 json 文件 定义列表控件的 props 基于 el-table 封装,实现依赖 json 渲染 实现内置功能:选择行(单选.多选),格式化.锁 ...

  2. 【摸鱼神器】UI库秒变低代码工具——表单篇(二)子控件

    上一篇介绍了表单控件,这一篇介绍一下表单里面的各种子控件的封装方式. 主要内容 需求分析 子控件的分类 子控件属性的分类 定义 interface. 定义子控件的的 props. 定义 json 文件 ...

  3. 【摸鱼神器】UI库秒变低代码工具——表单篇(一)设计

    前面说了列表的低代码化的方法,本篇介绍一下表单的低代码化. 内容摘要 需求分析. 定义 interface. 定义表单控件的 props. 定义 json 文件. 基于 el-form 封装,实现依赖 ...

  4. Thief-Book 上班摸鱼神器

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

  5. vscode插件(摸鱼神器-小霸王游戏机

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

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

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

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

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

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

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

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

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

随机推荐

  1. LINUX执行shutdown.sh提示:-bash: ./startup.sh: Permission denied

    在执行./startup.sh,或者./shutdown.sh的时候,爆出了Permission denied, 其实很简单,就是今天在执行tomcat的时候,用户没有权限,而导致无法执行, 用命令c ...

  2. js,nodejs如何判断文件是什么编码格式

    nodejs编码只支持utf8的编码方式,无论是打开某个文件或者写.js脚本都得以utf8的编码方式保存,不然程序无法运行,读出来的文件是乱码. 如果是在前台,读取文件是通过FileReader或者F ...

  3. Java报错:Failed to execute goal org.eclipse.jetty:jetty-maven-plugin:9.4.26.v20200117:run (default-cli) on project ssm-mybatis-plus: Failure

    修改一下端口就好了,不要用80端口. <plugin> <groupId>org.eclipse.jetty</groupId> <!--嵌入式Jetty的M ...

  4. JavaScript基础第03天笔记

    JavaScript基础第03天笔记 1 - 循环 1.1 for循环 语法结构 for(初始化变量; 条件表达式; 操作表达式 ){ //循环体 } 名称 作用 初始化变量 通常被用于初始化一个计数 ...

  5. AcWing周赛43

    AcWing周赛43 题源:https://www.acwing.com/activity/content/1233/ 4314. 三元组 直接暴力做就是了,我一开始还在找规律..悲 我滴代码 #in ...

  6. Android四大组件——Activity——Activity的生命周期

    Activity状态: 每个Activity在其生命周期中最多可能有四种状态 1.运行状态:处于栈顶时.初次创建处于栈顶时依次调用:onCreate(),onStart(),onResume().由不 ...

  7. gnome shell 扩展命令行开启和关闭

    #关闭 gnome-shell-extension-tool -d 扩展名 #开启 gnome-shell-extension-tool -e 扩展名 例如: gnome-shell-extensio ...

  8. Python paho-mqtt使用心得

    一.概述 一)基本概念 使用回调处理从MQTT代理返回的数据,要使用回调需要先定义回调函数然后将其指派给客户端实例(client). 例如: # 定义一个回调函数 def on_connect(cli ...

  9. PHP入门-Window 下利用Nginx+PHP 搭建环境

    前言 最近公司有个PHP项目需要开发维护,之前一直都是跟着巨硬混的,现在要接触PHP项目.学习一门新语言之前,先搭建好环境吧,鉴于公司项目是基于php 7.1.33 版本的,所以以下我使用的都是基于这 ...

  10. 彻底解决Failed to execute goal on project xxxxx

    1.错误内容:Could not resolve dependencies for project 今天在使用mvn clean package命令对一个子项目打包的时候出现如下错误(但是使用mave ...