上一篇介绍了一下如何实现一个可以依赖 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. css3,css的基础全局运用

    浮动 1.浮动起来的盒子不占用位置,浮动了一个盒子下面的标准流的盒子会顶上来 ​ 可用清除浮动的方法来解决标准流会顶替位置的问题 清除浮动给父盒子加overflow: hidden; 鼠标经过事件 : ...

  2. [ Perl ] 对文本文件进行行列翻转

    https://www.cnblogs.com/yeungchie/ code #!/usr/bin/env perl #----------------------------- # Program ...

  3. 基于Debian搭建Hyperledger Fabric 2.4开发环境及运行简单案例

    相关实验源码已上传:https://github.com/wefantasy/FabricLearn 前言 在基于truffle框架实现以太坊公开拍卖智能合约中我们已经实现了以太坊智能合约的编写及部署 ...

  4. linux设备管理之主设备号与次设备号

    主设备号和次设备号 一个字符设备或者块设备都有一个主设备号和次设备号.主设备号和次设备号统称为设备号.主设备号用来表示一个特定的驱动程序.次设备号用来表示使用该驱动程序的其他设备.(主设备号和控制这类 ...

  5. Markdown练习

    这是一级标题 这是二级标题 这是三级标题 这是无序列表1 这是无序列表2 有序1 有序2 重点 计网 1. 第一章 第一部分 1.概念.组成.功能和分类 1. 概念 计算机网络是互连的.自治的计算机的 ...

  6. 日常使用mobx的小技巧

    日常使用mobx的小技巧 由于自己开发的项目都是中小型项目,所以在技术选型上使用了mobx.但是使用过程中发现关于mobx的技术文章并不多.于是萌发出写这篇文章的想法.请轻喷. 更新控制store渲染 ...

  7. acwing刷题--激光炸弹--前缀和(后期会有优化做法)

    地图上有 N 个目标,用整数 Xi,Yi 表示目标在地图上的位置,每个目标都有一个价值 Wi. 注意:不同目标可能在同一位置. 现在有一种新型的激光炸弹,可以摧毁一个包含 R×R 个位置的正方形内的所 ...

  8. Python实现双X轴双Y轴绘图

    诈尸人口回归.这一年忙着灌水忙到头都掉了,最近在女朋友的提醒下终于想起来博客的账号密码,正好今天灌水的时候需要画一个双X轴双Y轴的图,研究了两小时终于用Py实现了.找资料的过程中没有发现有系统的文章, ...

  9. 我向PostgreSQL社区贡献的功能:空闲会话超时

    经过约八个月的努力,终于完成了 PostgreSQL 空闲会话超时断开的功能. 该功能将在版本 14 中发布. 这是我第一次向 PostgreSQL 提供功能,虽然之前也有向社区提供过补丁,但是这次整 ...

  10. echarts基本使用与注意事项

    npm 安装echarts npm install echarts -D 使用流程 1. 引入echarts,并配置成全局方法 vue2 import * as echarts from 'echar ...