ant design table中增加按钮的两种方式

简介: ant design table中增加按钮的两种方式

前言

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


导语

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




编辑


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



相关文章
|
10月前
ant design pro 更改表格自带的分页
ant design pro 更改表格自带的分页
74 0
|
开发工具 git
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
563 0
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
|
9月前
|
前端开发 API
ant design控制tag选中的写法
ant design控制tag选中的写法
58 0
|
9月前
|
前端开发
ant design table中增加按钮的两种方式
ant design table中增加按钮的两种方式
68 0
|
9月前
hook+ant design实现列表的增加和修改(弹出框)
hook+ant design实现列表的增加和修改(弹出框)
49 0
|
9月前
|
数据处理 数据格式
hook项目实例之原始数据形成ant design table表格 2
hook项目实例之原始数据形成ant design table表格
41 0
|
9月前
|
数据格式
hook项目实例之原始数据形成ant design table表格
hook项目实例之原始数据形成ant design table表格
30 0
|
9月前
Ant Design Pro新增页面步骤
Ant Design Pro新增页面步骤
212 0
|
API
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
595 0
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
|
11月前
|
前端开发
ant design table实现上下行拖拽功能(类组件)
ant design table实现上下行拖拽功能(类组件)
213 0