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