#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中增加按钮的方式 欢迎一起交流讨论


相关文章
|
Dart JavaScript 前端开发
JavaScript & React & Ant Design & Flutter & Dart 基础学习笔记 Tree Form 组件通信 封装等
JavaScript & React & Ant Design & Flutter & Dart 基础学习笔记 Tree Form 组件通信 封装等
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
JavaScript 前端开发 数据处理
【React/Vue2】 使用Element UI 高度封装Select 下拉框创建条目(Ant Design更为简单)
【React/Vue2】 使用Element UI 高度封装Select 下拉框创建条目(Ant Design更为简单)
【React/Vue2】 使用Element UI 高度封装Select 下拉框创建条目(Ant Design更为简单)
|
前端开发
【React工作记录一百零一】再次接触老朋友react+ant design table合并单元格(2)
#yyds干货盘点 再次接触老朋友react+ant design table合并单元格
162 0
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
698 0
|
前端开发 JavaScript API
React组件库设计 | 关于我一边写Concis一边给字节组件库arco design提pr的分享
看过我最近的一些文章的小伙伴应该都知道,博主最近半年时间一直在写自己的React组件库Concis,其实这也是从造轮子 -> 学习的目的去做这件事的。
301 1
React组件库设计 | 关于我一边写Concis一边给字节组件库arco design提pr的分享
|
前端开发
从零开始学习React-引入Ant Design 组件(八)
从零开始学习React-引入Ant Design 组件(八)
275 0
|
前端开发 数据格式
再次接触老朋友react+ant design table合并单元格
再次接触老朋友react+ant design table合并单元格
364 0
|
前端开发 数据格式
【React工作记录一百零一】再次接触老朋友react+ant design table合并单元格(1)
#yyds干货盘点 再次接触老朋友react+ant design table合并单元格
271 0
|
前端开发 JavaScript API
【React工作记录九十九】ant design mobile实现tab滚动效果和闪屏小记
【React工作记录九十九】ant design mobile实现tab滚动效果和闪屏小记
417 0