form generator 实现表格组件扩展

白昼的星光@

已于 2023-09-01 18:02:56 修改

阅读量848

点赞数 8

分类专栏： form-generator 文章标签：前端 vue javascript

于 2023-08-31 16:42:52 首次发布

本文链接：https://blog.csdn.net/weixin_44815800/article/details/132596033

版权

form-generator 专栏收录该内容

3 篇文章 5 订阅

订阅专栏

场景

在开发公司的后台管理系统（Rou-yi）中使用了 form-generator 表单生成器；使用其并不是为了用它减少代码量因为复制粘贴或者ChartGPT都比表单编辑器好用多了，主要是和bpmn 工作流组件相结合实现流程管理。
由于工作流中不可避免的使用表格，而form-generator本身表格并不完善，所以自己扩展了表格，有以下几个点需要注意

每个人的业务需求不同，该表格可能无法满足其他人的业务需求，后期我会出一篇怎么自定义组件的教程
该表格只扩展了build编辑和parse解析，没有处理预览和导出的功能
可能存在没有测试出的bug ╮(๑•́ ₃•̀๑)╭

本地预览

拉取仓库 https://gitee.com/starlight_day/form-generator.git
npm i
npm run dev
ps：如果node版本太高需要在运行前运行 $env:NODE_OPTIONS=“–openssl-legacy-provider”
http://127.0.0.1:8080/#/qjt 请假条例子
http://127.0.0.1:8080/#/cat 动态数据例子

功能

表格CRUD

适合用户主动填写信息的场景，例如请假条；例子见 http://127.0.0.1:8080/#/qjt

在这里插入图片描述
首先表格分为两个数据data表格的数据和columns表格列的数据。通过表格修改data数据，通过侧栏设计表格的列数据。注意：

在使用过程中可能会控制台报错，例如在编辑表格列两个列的字段名相同。这种输入错误没有做限制
编辑data时只有点击√后数据才会更新，而不是input时更新

动态数据渲染

适合向用户展示数据，例如展示订单数据例子见：http://127.0.0.1:8080/#/cat

在这里插入图片描述
这里请先设置好表格列数据，在填写接口地址和数据位置，如果后设置表格列，可能会导致数据不更新，此时需再次点击获取数据；注意：

动态数据是不需要存数据的，数据会在parser组件mounted的时候请求，这里只是展示
示例地址 https://api.thecatapi.com/v1/images/search?limit=10 随机获取10张猫的图片
有时候接口数据可能会有嵌套例如

{
	code:200
	data:{
		row:[...]
	}
}

此时将数据位置写成data.row即可

列数据格式转化

上个例子获取了10张猫的图片，可是却没有展示，这里我们可以对列的数据进行转化

点击列编辑按钮，找到数据类型选中图片格式

在这里插入图片描述
选中后效果如下

自定义列内容

我们使用element-ui时经常使用slot来插入内容，当我们数据类型选择自定义的时候可以将表格内容渲染成任意内容例如：

在这里插入图片描述
此时函数定义为

function(h,data,row){
  return h('div',data+300)
}

h是createElement的别名，用于创建虚拟DOM元素，不了解渲染函数和jsx的同学请先看下vue文档中的渲染函数有了它我们就可以使用任何组件和标签
data为当前单元格的数据
row为行的数据
返回值为h函数创建的虚拟dom

这里的上限很高，我在使用的时候写过这样的函数

// 这里我从row.orderItemList取出了所有的productName
function(h,data,row){
  let child = [];
  if( row.orderItemList && row.orderItemList.length ){
    child = row.orderItemList.map(function(goodsItem){
      return goodsItem.productName
    })
  }
  return h('div',child)
}