#yyds干货盘点 【React工作记录三十二】ant design table中增加按钮的两种方式

简介: #yyds干货盘点 【React工作记录三十二】ant design table中增加按钮的两种方式

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


导语

歌谣 歌谣 ant design中table里面如何增加按钮呢


image.png


编辑


方式1 push

{
        title: '操作',
        dataIndex: 'operation',
        align: 'center',
        list: (text, row) => {
          let arr = [];
          arr.push({
            name: '修改',
            onClick: () => {
              this.props.handleUpdate(row.lecturerCode);
            },
          });
          if (
            row.status === '1202012241104168888017657' ||
            row.status === '1202012241105288888630417'
          ) {
            arr.push({
              name: '删除',
              isPopConfirm: true,
              btnTxt: '确认删除该讲师吗?',
              onClick: () => {
                this.props.handleDelete([row.lecturerId]);
              },
            });
          }
          return arr;
        },
      },

方式二 数组

const tagIcon = {
      title: '标签',
      icon: 'plus',
      type: 'primary',
      onClick: () => this.handleAddTag(selectedRowKeys),
    };
    const delIcon = {
      title: '删除',
      isDelete: true,
      icon: 'delete',
      type: 'primary',
      // loading: deleteButtonLoading,
      onClick: () => this.handleDelete(selectedRowKeys),
    };
    const addIcon = {
      title: '新增',
      icon: 'plus',
      type: 'primary',
      onClick: () => this.handleAddLecturer(),
    };
    const uploadIcon = {
      title: '导出',
      icon: 'export',
      type: 'primary',
      href: this.handleExport(),
      // onClick: () => this.handleExport(),
    };
    const buttonList = listType === 'table' ? [addIcon, cardIcon] :
 [addIcon, cardIcon];

总结

本文总结了两种在ant design table中增加按钮的方式 欢迎一起交流讨论


相关文章
|
1天前
|
云安全 人工智能 安全
AI被攻击怎么办?
阿里云提供 AI 全栈安全能力,其中对网络攻击的主动识别、智能阻断与快速响应构成其核心防线,依托原生安全防护为客户筑牢免疫屏障。
|
11天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
5天前
|
安全 Java Android开发
深度解析 Android 崩溃捕获原理及从崩溃到归因的闭环实践
崩溃堆栈全是 a.b.c?Native 错误查不到行号?本文详解 Android 崩溃采集全链路原理,教你如何把“天书”变“说明书”。RUM SDK 已支持一键接入。
448 192
|
3天前
|
数据采集 消息中间件 人工智能
跨系统数据搬运的全方位解析,包括定义、痛点、技术、方法及智能体解决方案
跨系统数据搬运打通企业数据孤岛,实现CRM、ERP等系统高效互通。伴随数字化转型,全球市场规模超150亿美元,中国年增速达30%。本文详解其定义、痛点、技术原理、主流方法及智能体新范式,结合实在Agent等案例,揭示从数据割裂到智能流通的实践路径,助力企业降本增效,释放数据价值。
|
9天前
|
人工智能 自然语言处理 安全
国内主流Agent工具功能全维度对比:从技术内核到场景落地,一篇读懂所有选择
2024年全球AI Agent市场规模达52.9亿美元,预计2030年将增长至471亿美元,亚太地区增速领先。国内Agent工具呈现“百花齐放”格局,涵盖政务、金融、电商等多场景。本文深入解析实在智能实在Agent等主流产品,在技术架构、任务规划、多模态交互、工具集成等方面进行全维度对比,结合市场反馈与行业趋势,为企业及个人用户提供科学选型指南,助力高效落地AI智能体应用。
|
5天前
|
消息中间件 安全 NoSQL
阿里云通过中国信通院首批安全可信中间件评估
近日,由中国信通院主办的 2025(第五届)数字化转型发展大会在京举行。会上,“阿里云应用服务器软件 AliEE”、“消息队列软件 RocketMQ”、“云数据库 Tair”三款产品成功通过中国信通院“安全可信中间件”系列评估,成为首批获此认证的中间件产品。此次评估覆盖安全可信要求、功能完备性、安全防护能力、性能表现、可靠性与可维护性等核心指标,标志着阿里云中间件产品在多架构适配与安全能力上达到行业领先水平。
315 195