html表格可视化设计器,基于vue-element-ui的一款表格设计器table-making

简介

如果你的项目中有很多的表格，即使用element-ui table插件你也必须每次都必须写一遍代码进行开发，如果你使用过表单设计器，你就会希望能得到一款像form表单设计器一样可以通过拖拽配置快速生成一个表格，table-making就是一款不错的表格设计器。参照form-making的源码，并可以集成进form-making中配合表单或其他可视化工具中使用快速设计出表格，并且可以在vue项目中渲染。

该插件包含两个重要组件

TableMaking 表格设计器

GenerateTable 表格渲染器

gitHub地址

table-making

演示地址

table-making

使用教程

安装

npm install table-making

由于该项目使用了自定义代码编辑器monaco-editor，该工具打包后代码量稍大分割后有多个文件，项目中按需加载需要在引入该插件的工程中进行webpack配置 即在vue.config.js文件中增加如下插件CopyWebpackPlugin的配置(如何安装CopyWebpackPlugin及配置请自行学习)

plugins: [

new CopyWebpackPlugin(

[

{

context: 'node_modules/table-making/dist/',

from: '*.js',

to: process.env.NODE_ENV === 'development' ? './':'static/js',

toType: 'dir'