京東又開源一款新框架，用起來真優(yōu)雅！

• 優(yōu)勢
• 何時使用
• 開始使用
  • 配置端
  • 應用端
  • 開源地址

DripTable 是京東零售推出的一款用于企業(yè)級中后臺的動態(tài)列表解決方案，項目基于 React 和 JSON Schema，旨在通過簡單配置快速生成頁面動態(tài)列表來降低列表開發(fā)難度、提高工作效率。

DripTable 目前包含以下子項目：drip-table、drip-table-generator。各個子項目具體介紹如下：

• drip-table：動態(tài)列表解決方案的核心庫，其主要能力是支持符合 JSON Schema 標準的數(shù)據(jù)自動渲染列表內(nèi)容。
• drip-table-generator：一個可視化的用于 DripTable 配置 JSON Schema 標準的配置數(shù)據(jù)的生成工具。

優(yōu)勢

• 高效開發(fā)：提高前端列表開發(fā)效率，實現(xiàn) Lowcode 方式快速開發(fā)列表頁。
• 配置化渲染：以簡單的 JSON Schema 配置字段，自動渲染處所需要的列表，降低用戶使用成本。
• 動態(tài)可擴展：支持自定義組件開發(fā)，通過API快速生成自定義的或者實現(xiàn)業(yè)務功能的單元格組件。
• 界面框架自由：表格界面框架支持多種主題包，另外還支持自定義主題包。

何時使用

• 用于中后臺 CMS 列表頁的快速搭建，通過簡單 JSON Schema 數(shù)據(jù)即可生成列表，無需硬編碼。
• 用于 Lowcode 列表搭建的前端 Table 預覽以及實現(xiàn)，無需復雜前端代碼，便可實現(xiàn)自定義的列表。

開始使用

DripTable 分為兩種應用場景：配置端和應用端。配置端主要負責通過可視化方式和 low-code 方式進行 JSON Schema 標準數(shù)據(jù)的生成。應用端的職能則是將 JSON Schema 標準配置數(shù)據(jù)渲染成動態(tài)列表。

配置端

1 安裝依賴

配置端依賴應用端，安裝前先確保已安裝 drip-table。

「yarn」

yarnadddrip-table-generator

「npm」

npminstall--savedrip-table-generator

2 在文件開頭引入依賴

importDripTableGeneratorfrom"drip-table-generator";
import"drip-table-generator/dist/index.min.css";

3 在頁面中引用

return;

配置端正常渲染效果如下：

1 安裝依賴

安裝 drip-table：

「yarn」

yarnadddrip-table

「npm」

npminstall--savedrip-table

2 在文件開頭引入依賴

//引入drip-table
importDripTablefrom"drip-table";
//引入drip-table樣式
import"drip-table/dist/index.min.css";

3 引用

constschema={
size:"middle",
columns:[
{
key:"columnKey",
title:"列標題",
dataIndex:"dataIndexName",
component:"text",
options:{
mode:"single",
},
},
],
};
return(

);

應用端正常渲染效果如下：

開源地址

• https://github.com/JDFED/drip-table