table-generator

动态表格-配置生成器

• 数据驱动表格渲染
• 支持分页器使用
• 目前版本是基于element-ui实现的，需要项目中引入element-ui方可使用
• 可通过配置页面生成表格配置信息，该页面下文统称为表格生成器，生成器访问地址为 http://canfoo.github.io/web/table-generator/index.html#/config/table

document

demo

$ git clone https://github.com/canfoo/table-generator.git

npm install

npm run start

访问http://localhost:3999/#/demo

测试

npm run test

使用

安装

$ npm install table-generator --save

引入

import tableGenerator from 'table-generator';
Vue.use(tableGenerator);

配置表格组件库目录（表格配置组件库类型，会从组件库根据名称加载相同名称的组件，支持多层目录，注意：需要确保组件库的组件名是唯一的）

tableGenerator.repository(() => require.context(path));
// path为组件库目录路径，必须显示传入，不可传入变量。例如可以写成require.context('../components')；不能写成 let cPath = '../components'; require.context(cPath);

配置表格表格枚举库（表格配置枚举表时，可以从枚举库通过名称加载名称相同的枚举表，支持嵌套写法，例如 'mapName.hotelType'）

tableGenerator.enumerator(() => require(path));
// path为组件库目录路径，必须显示传入，不可传入变量。例子见上文

表格生成器页面，点击前往

可以通过表格生成器页面快速生成列配置表(columnOptions)的参数。 生成步骤： 1.粘贴表格的mock数据 2.根据mock数据配置表格列信息 3.生成columnOptions参数列表（直接拷贝到业务代码里面，传入到tableGenerator组件props的columnOptions字段里，即可生成表格）