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

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

前言


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


导语


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


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



相关文章
|
8月前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
214 0
|
API
React+Hook+ts+antDesign实现table行编辑功能(1)
React+Hook+ts+antDesign实现table行编辑功能
212 0
|
前端开发
【React工作记录一百零一】再次接触老朋友react+ant design table合并单元格(2)
#yyds干货盘点 再次接触老朋友react+ant design table合并单元格
107 0
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
75 0
|
前端开发
从零开始学习React-引入Ant Design 组件(八)
从零开始学习React-引入Ant Design 组件(八)
110 0
|
前端开发 JavaScript
React基础语法08-点击按钮,获取input框的值(通过ref来获取)
React基础语法08-点击按钮,获取input框的值(通过ref来获取)
193 0
|
前端开发
React基础语法07-点击按钮,获取input框的值(通过事件对象获取)
React基础语法07-点击按钮,获取input框的值(通过事件对象获取)
128 0
|
前端开发 数据格式
再次接触老朋友react+ant design table合并单元格
再次接触老朋友react+ant design table合并单元格
160 0
|
前端开发 数据处理
React+Hook+ts+antDesign实现table行编辑功能(2)
React+Hook+ts+antDesign实现table行编辑功能
130 0
|
前端开发 JavaScript