react项目 何如在antd-table组件中给render里添加判断

Question

如何在render里根据后台获取数据isDestory:的 true和FALSE 给删除按钮添加判断
当isDestory为FALSE的时候 给删除按钮添加 disabled属性

Answer 1

{
                title: "操作",
                key: "option",
                width: 210,
                render: (text, record) => {
                    let userName = typeof userId != "undefined" ? userId : "aaa";
                    let delPower = userName == record.owner || isAllAdmin; //删除权限
                    let deployPower = delPower || record.developer.indexOf(userName) > -1; //部署,编辑权限
                    return (
                        <span>
                            <Select
                                placeholder="文档操作"
                                className="operate"
                                style={{ width: 105 }}
                                disabled={deployPower ? false : true}
                                onSelect={this.handleOperate.bind(this, record)}
                            >
                                <Option value="build">
                                    <Icon type="build" />
                                    文档部署
                                </Option>
                                <Option value="editData">
                                    <Icon type="database" />
                                    数据修改
                                </Option>
                                {record.docType == "gitbook" && deployPower ? (
                                    <Option value="editFile">
                                        <Link
                                            to={{
                                                pathname: "/docsource/docEdit",
                                                param: {
                                                    docName: record.name,
                                                    delPower: delPower
                                                }
                                            }}
                                        >
                                            <Icon type="edit" />
                                            文件编辑
                                        </Link>
                                    </Option>
                                ) : null}
                            </Select>

                            {delPower ? (
                                <Button
                                    type="danger"
                                    style={{ marginRight: 5, padding: "0 6px" }}
                                    onClick={this.delDoc.bind(null, record._id, record.name)}
                                    icon="delete"
                                >
                                    删除
                                </Button>
                            ) : null}
                        </span>
                    );
                }
            }

record里面就是当前列表选项的一个json对象

Answer 2

你这个只是需要在你的jsx代码中，给元素添加一个类型标示就可以了，onClick触发，然后类型作为参数传入函数中。

具体的写法还是要看文档了

Answer 3

    // 假设你的isDestory属性在 行里面
    ...
    render: (text, record) => (
        <div>
            <button>修改</button>
            <button disabled={!record.isDestory}>删除</button>
        </div>
    )
    ...

Answer 4

   // record为你这一行的数据，就是dataSource里面的每一项 
   const isDestory = record.isDestory;
    render: (text, record) => (
        <div>
            <button disabled={!isDestory}>删除</button>
        </div>
    )

Answer 5

render: (text, record, opreate) => {
  const { isDestory } = record;
  return (
    <div>
      <span>详情</span>
      <span style={{color: isDestory ? '' : ''}}>删除</span>
    </div>
  )
}

通过isDestory给删除文字添加自己想要的样式 在对应的方法中做判断 如果存在isDestory 直接return