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

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

相关推荐
万邦科技Lafite2 小时前
京东按图搜索京东商品(拍立淘) API (.jd.item_search_img)快速抓取数据
开发语言·前端·数据库·python·电商开放平台·京东开放平台
一只小透明啊啊啊啊4 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友5 小时前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao5 小时前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
啃火龙果的兔子5 小时前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...5 小时前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪6 小时前
函数组件和异步组件
前端·javascript·面试
淮北4946 小时前
html + css +js
开发语言·前端·javascript·css·html
你的人类朋友6 小时前
适配器模式:适配就完事了bro!
前端·后端·设计模式
Setsuna_F_Seiei6 小时前
CocosCreator 游戏开发 - 利用 AssetsBundle 技术对小游戏包体积进行优化
前端·cocos creator·游戏开发