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 (
                <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} />

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

相关推荐
小桥风满袖39 分钟前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
小Wang1 小时前
npm私有库创建(docker+verdaccio)
前端·docker·npm
用户73087011793081 小时前
Vue中集成文字转语音:使用Web Speech API实现功能
前端
李重楼1 小时前
前端性能优化之 HTTP/2 多路复用
前端·面试
yanessa_yu1 小时前
全屏滚动网站PC端自适应方案
前端
RoyLin1 小时前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者1 小时前
Vue中实现Word、Excel、PDF预览的详细步骤
前端
brzhang1 小时前
干翻 Docker?WebAssembly 3.0 的野心,远不止浏览器,来一起看看吧
前端·后端·架构
lecepin2 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒2 小时前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端