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



相关文章
【moment】两个Moment时间大小的比较
【moment】两个Moment时间大小的比较
|
5月前
|
API
免费的股票实时行情API接口(散户量化)
散户量化,股票下单交易API接口,免费实时行情API接口
1880 0
|
Java
Java将OffsetDateTime格式化为 yyyy-MM-dd HH:mm:ss 如何写代码?
Java将OffsetDateTime格式化为 yyyy-MM-dd HH:mm:ss 如何写代码?
426 0
|
前端开发
antd_使用Input封装实现Form校验效果
本文介绍了如何在Ant Design (antd) 中使用 Input 组件封装实现表单校验效果,包括必填、数字、IP、邮箱、手机号、身份证号和域名等校验规则的使用,以及如何通过回调函数进行校验。
541 4
|
前端开发
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
3153 1
|
人工智能 JavaScript 开发工具
【完全免费】VS Code 最好用的 12 款 AI 代码提示插件!!!
🎉 探索12款免费VSCode AI代码提示插件:Codeium、Codegeex、CodeFuse、TONGYI Lingma、Comate、iFlyCode、Fitten Code、Bito AI、Mintlify Doc Writer、Kodezi AI、aiXcoder、IntelliCode。这些插件提供智能补全、代码生成、注释、优化,支持多种语言,提升编程效率!🚀👩‍💻👨‍💻
19324 0
|
API Apache C#
推荐2款开源、美观的WinForm UI控件库
推荐2款开源、美观的WinForm UI控件库
1103 1
|
消息中间件 测试技术 领域建模
DDD - 一文读懂DDD领域驱动设计
DDD - 一文读懂DDD领域驱动设计
46178 6
|
JavaScript API
vue3父子组件相互调用方法详解
vue3父子组件相互调用方法详解