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

相关文章
|
2月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
52 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
2月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
2月前
|
前端开发
react antd点击table行时加选中背景色
react antd点击table行时加选中背景色
81 5
|
2月前
|
缓存 前端开发 JavaScript
在react项目中实现按钮权限createContext && useContext
文章介绍了在React项目中如何使用`createContext`和`useContext`来实现按钮级别的权限控制。
56 0
|
3月前
|
前端开发 JavaScript 数据库
在 React 项目中 Editable Table 的实现
由于我们是把 state 存放在父组件的,每次请求会造成 table 进行 render 一遍,如果再加入 loading 等状态,render 次数会更多。Table 组件默认情况下没有对 rerender 行为做优化,父组件更新,如果 columns 中的提供了自定义 render 方法, 对应的每个 Cell 都会重新 render 。 针对这种情况我们就需要进行优化,根据 shouldCellUpdate 来自定义渲染时机。 那么每个 Cell 的渲染时机应该是: 1. FormItem 增删位置变动时 2. 该 Cell 消费的对应 tableOptions 变动时 第一种情况很好判
52 1
|
6月前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理按钮的点击行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理按钮的点击行为?
53 1
|
6月前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
179 0
|
11月前
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
69 0
|
12月前
|
前端开发
从零开始学习React-引入Ant Design 组件(八)
从零开始学习React-引入Ant Design 组件(八)
96 0
|
3天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
22 8