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



相关文章
|
Java Nacos Docker
在集成nacos时,端口9848报错但服务器的这个端口是开放的
在集成nacos时,端口9848报错但服务器的这个端口是开放的【1月更文挑战第14天】【1月更文挑战第67篇】
1675 1
|
索引
antd a-table表格添加序号和分页总数——基础积累
antd a-table表格添加序号和分页总数——基础积累
1131 0
|
7月前
|
人工智能 前端开发 Java
用git rebase命令合并开发阶段中多条commit提交记录
通过 `git rebase`,可以合并多个提交记录,使开发历史更简洁清晰。操作分为 6 步:查看提交历史 (`git log --oneline`)、设置需合并的提交数 (`git rebase -i HEAD~N`)、修改动作标识为 `s`(squash)、保存退出编辑、调整提交信息、强制推送至远程仓库 (`git push -f`)。此方法适合清理本地无关提交,但若有团队协作或冲突风险,需谨慎使用以避免问题。
949 60
|
10月前
|
机器学习/深度学习 人工智能 自然语言处理
AI在内容创作中的创新:开启智能创意的新时代
AI在内容创作中的创新:开启智能创意的新时代
1219 14
|
人工智能 JavaScript 索引
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
这篇文章讨论了在Vue中进行列表渲染时遇到的“Duplicate keys detected”错误。这个错误通常发生在使用 `v-for` 指令渲染列表时,如果没有为每个循环项指定一个唯一的 `key` 属性,或者指定的 `key` 属性值重复了。文章提供了导致错误的原始代码示例,并给出了修正后的代码,通过在 `key` 绑定中加入索引确保 `key` 的唯一性。此外,文章还解释了为什么需要唯一 `key` 以及如何解决这个问题。
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
|
存储 边缘计算 人工智能
云上物联网:连接万物,驱动智能未来
标准化与互操作性:随着物联网设备的不断增多和应用场景的日益广泛,标准化和互操作性将成为云上物联网发展的重要趋势。通过制定统一的标准和规范,实现不同品牌、不同型号物联网设备之间的互联互通和互操作,将大大提升云上物联网的灵活性和可扩展性。 边缘计算与云端协同:未来的云上物联网将更加注重
367 7
|
JSON 资源调度 前端开发
vue-quill使用时候要注意css引入方式,不然会报错,卡死,白屏
vue-quill使用时候要注意css引入方式,不然会报错,卡死,白屏
714 0
|
消息中间件 存储 缓存
Kafka副本知识总结
Kafka副本知识总结
492 0
Kafka副本知识总结
|
监控 安全 Java
ElasticSearch在Windows上的下载与安装
ElasticSearch在Windows上的下载与安装