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

百事可乐☆2024-07-16 12:01

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

注意：我们要在表头数据中添加一个 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} />

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