render()中添加js函数
2024-09-01 10:45:09
方案一:
{
title: '操作',
key: 'operation',
render: (_, record) => (
<div>
<Link to={`/hostMain/${record.hostId}`}><Icon type="edit"/>编辑</Link>
<span className="ant-divider"/>
<Popconfirm title="是否确认删除该记录?"
onConfirm={() => this.hostState.deleteHost(record.hostId)}>
{record.status === '正常' ? <a className="fgw-text-error"><Icon type="delete"/>停用</a> : ''}
</Popconfirm>
</div>)
}
方案二:
在
render()函数之前添加自定义函数(主要处理多个状态,需要显示不同操作和状态值得情况可以这么处理,如果只是两个状态,建议使用方案一)
myStatus = (obj) => {
console.log('obj', obj);
if (obj.status === '正常') {
return (
<span>
<a className="fgw-text-error"><Icon type="delete"/>停用</a>
<span className="ant-divider"/>
<a className="fgw-text-error"><Icon type="delete"/>从机柜上移除主机</a>
</span>);
} else if (obj.status === '未使用' && obj.cabinetId) {
return (
<span>
<a className="fgw-text-error"><Icon type="delete"/>启用</a>
<span className="ant-divider"/>
<a className="fgw-text-error"><Icon type="delete"/>从机柜上移除主机</a>
</span>);
} else {
return ('');
} };
{
title: '操作',
key: 'operation',
render: (_, record) => (
<div>
<Link to={`/hostMain/${record.hostId}`}><Icon type="edit"/>编辑</Link>
<span className="ant-divider"/>
<Popconfirm title="是否确认该操作?"
onConfirm={() => this.hostState.deleteHost(record.hostId)}>
{this.myStatus(record)}
</Popconfirm> </div>)
}
最新文章
- vijos1250 最勇敢的机器人
- BZOJ1103[POI2007]大都市meg 题解
- selenium之xpath定位和input文本
- [Effective JavaScript 笔记]第42条:避免使用轻率的猴子补丁
- SqlSever基础 两个条件 group by 分组显示
- (C/C++) Callback Function 回调(diao)函数
- css基础之 语法
- IOS开发:xcode5版本引发的问题
- vim netrw
- 线段树+dp+贪心 Codeforces Round #353 (Div. 2) E
- Hadoop的介绍、搭建、环境
- Java基础总结--泛型总结
- jQuery选择器(属性过滤选择器)第六节
- springMVC源码分析--AbstractControllerUrlHandlerMapping(六)
- POJ 1208 The Blocks Problem --vector
- Ubuntu18.04 快速返回桌面 【快捷键】
- vue获得当前页面URL动态拼接URL复制邀请链接方法
- oninput和onchange的区别
- module &#39;scipy.misc&#39; has no attribute &#39;toimage&#39;,python
- ScrollView fillViewport
热门文章
- 记录 ubuntu 安装中文语言出现 software database is broken
- BZOJ1209 最佳包裹 (三维凸包 增量法)
- Java图形界面
- 判断大文件是否上传成功(一个大文件上传到ftp,判断是否上传完成)
- Nginx设置禁止通过IP访问服务器并且只能通过指定域名访问
- P4316 绿豆蛙的归宿 期望DP
- CSP考前总结
- eclipse 点击 new window 后,关闭新增的窗口
- E【中】假的字符串(trie+拓扑排序)
- $.extend和$.fn.extend详解