render()中添加js函数

 

 方案一：

{ 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>)
        }