模拟后端返回的表头、列表数据
![](https://i-blog.csdnimg.cn/direct/df08429c06f24e79b672b91f5870dc6a.png)
![](https://i-blog.csdnimg.cn/direct/c0bb72ebbdf14c6b99f545e5d1a46475.png)
注意:我们要在表头数据中添加一个 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 (
<Button
type="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} />
我们的需求是动态表单,表头也是后端返回的数据进行渲染