京东开源出品：轻量、强大的【列表可视化搭建】解决方案！
大家注意：因为微信最近又改了推送机制，经常有小伙伴说错过了之前被删的文章，或者一些限时福利，错过了就是错过了。所以建议大家加个星标，就能第一时间收到推送。
大家好，我是「前端实验室」爱分享的了不起~
列表布局需求是我们日常开发中经常遇到的问题。今天给大家分享一款京东开源的、高效的企业级表格可视化搭建解决方案：DripTable
简介
DripTable，是由京东零售iPaaS前端研发团队推出的一种通过LowCode方式搭建web列表的技术方案。
这款轻量简单的企业级中后台动态列表生成解决方案，基于 React 和 JSON Schema，旨在通过简单配置快速生成页面动态列表来。
可视化搭建列表，降低列表开发难度、提高工作效率、节约开发人力和资源。
DripTable分为两个部分：
drip-table：动态列表解决方案的核心库，其主要能力是支持符合 JSON Schema 标准的数据自动渲染列表内容。drip-table-generator：一个可视化的用于 DripTable 配置 JSON Schema 标准的配置数据的生成工具。
虽然是两个部分，但它们是相辅相成的。根据上面的介绍，一个是渲染数据，另一个是可视化配置的。下面我们举两个例子来看下。
drip-table安装和使用
先来看drip-table，这是用来渲染数据到列表中的。
首先注意下环境要求
Node >= 10.14.0
React >= 16.9.0
安装
安装前，确保drip-table所依赖React已经安装完毕。
npm install --save drip-table
基本使用
先引入相关的依赖
import React from 'react';
import DripTable from 'drip-table';
import 'drip-table/dist/index.min.css';
接着就可以创建组件实例
export default Demo = () => {
return (
<DripTable
schema={schema}
dataSource={dataSource}
/>
);
};
这里的重点是schema--它用来约束了表格的结构定义。我们来看个例子。
const schema = {
size: "middle",
pagination: {
pageSize: 10,
position: "bottomRight",
},
columns: [
{
key: "mock_1",
title: "商品名称",
dataIndex: "name",
component: "text",
options: {
mode: "single",
maxRow: 1,
},
},
{
key: "mock_2",
title: "商品详情",
align: "center",
dataIndex: "description",
component: "text",
options: {
mode: "single",
ellipsis: true,
maxRow: 1,
},
},
{
key: "mock_3",
title: "库存状态",
dataIndex: "status",
description: "这是一条提示信息",
component: "text",
options: {
mode: "single",
i18n: {
onSale: '售卖中',
soldOut: '已售罄',
},
},
},
{
key: "mock_4",
title: "商品价格",
width: 80,
dataIndex: "price",
component: "text",
options: {
mode: "single",
prefix: "￥",
},
},
{
key: "mock_5",
title: "操作",
width: 118,
dataIndex: "operate",
component: "link",
options: {
mode: "multiple",
operates: [
{ name: "order", label: "预定", href: "./#order", target: "_blank" },
{ name: "view", label: "查看", href: "./#view" },
{ name: "remove", label: "删除", href: "./#remove" },
],
},
},
],
};
// 这是表格的数据
const dataSource = [
{
id: 1,
name: "商品一",
description:
"商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
status: "onSale",
price: 7999,
},
看下效果
这部分的内容和antd、elementui中的表格很像，大家理解起来应该没难度。
drip-table-generator安装和使用
好啦！接下来说说drip-table-generator。根据名称，我们知道这是drip-table的生成器--可视化和 low-code 方式进行 JSON Schema 标准数据的生成
drip-table的schema太复杂，我们可能记不住这么多。那怎么办？drip-table-generator能搞定！
安装依赖
drip-table-generator 依赖 antd、drip-table 和 react，单独使用不要忘记安装～
yarn add drip-table-generator
使用
先依赖引入
import DripTableGenerator from 'drip-table-generator';
import 'drip-table-generator/dist/index.min.css';
接着，页面引入生成器即可
<DripTableGenerator />
然后就得到这个页面
点击➕就可以配置列表了。
可视化选项，要什么选什么。选好了，点击配置编辑，就能看到JSON schema是什么样的了。然后，ctrl + c 和 ctrl + v就可以使用啦！
DripTable优势和使用场景
优势
高效开发：提高前端列表开发效率，实现 Lowcode 方式快速开发列表页。配置化渲染：以简单的 JSON Schema 配置字段，自动渲染处所需要的列表，降低用户使用成本。动态可扩展：支持自定义组件开发，通过API快速生成自定义的或者实现业务功能的单元格组件。界面框架自由：表格界面框架支持多种主题包，另外还支持自定义主题包。
使用场景
但凡涉及到列表需求的都可以用它。
列表页的快速搭建，可以通过简单 JSON Schema 数据即可生成，无需硬编码。
用于 Lowcode 列表搭建的前端 Table 预览以及实现，无需复杂前端代码，便可实现自定义的列表。
当然，这里也只是入门介绍了DripTable的使用。更多详情，大家可以参阅官方文档。
源码地址：https://github.com/JDFED/drip-table 官网地址：http://drip-table.jd.com
最后
欢迎加入前端实验室读者交流群，分享交流优秀的技术和资料。
腾讯云开发者
