react Ant Design 动态表头添加操作列

模拟后端返回的表头、列表数据

 

 

注意：我们要在表头数据中添加一个 render 函数，里面就是你操作列的内容，value是你数据列表每行的对象 ，item 是你表头的对象

 页面中去处理这个两个数组

   dataList.forEach((item, index) => {item.operationList = arr;// arr = ['编辑'，'删除']});
arr 数组中的数据好像只支持这样格式，也可能是我没研究透

columns.forEach((item, index) => {if (item.key === "operation") {item.render = (_, value) => (<div style={{ display: "flex", justifyContent:'space-around' }}>{value.operationList.map((i) => {return (<Buttontype="primary"key={i}// 操作列的按钮事件onClick={() => {// i  是操作按钮// value 是每行的数据// item 是表头对象operationEvent(i, value, item);}}>{i}</Button>);})}</div>);}
});const operationEvent = (i, value, item) => {switch (i) {case "编辑":compileData(i, value, item);break;case "删除":delData(i, value, item);break;}};

html

import React, { useEffect } from "react";
import { Table, Button, message } from "antd";<Table columns={columns} dataSource={dataList} />

我们的需求是动态表单，表头也是后端返回的数据进行渲染