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