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

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

相关推荐
野生yumeko1 小时前
伪静态WordPress/Vue
前端·javascript·vue.js
爱因斯坦乐1 小时前
【vue】I18N国际化管理系统
前端·javascript·vue.js·笔记·前端框架
一只游鱼1 小时前
vue集成dplayer
前端·javascript·vue.js·播放器·dplayer
kyle~8 小时前
C++--- override 关键字 强制编译器验证当前函数是否重写基类的虚函数
java·前端·c++
Light608 小时前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
爱生活的苏苏9 小时前
elementUI 表单验证-联动型校验
前端·javascript·elementui
一只小风华~10 小时前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
*且听风吟11 小时前
html 实现鼠标滑动点亮横轴
前端·javascript·html
iCoding9112 小时前
前端分页 vs 后端分页:技术选型
前端·后端·系统架构
mingtianyihou3312 小时前
使用 Service Worker 限制请求并发数
前端