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

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

阅读 1.2k
评论 2019-09-27 提问
    5 个回答
    {
                    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对象

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

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

            // 假设你的isDestory属性在 行里面
            ...
            render: (text, record) => (
                <div>
                    <button>修改</button>
                    <button disabled={!record.isDestory}>删除</button>
                </div>
            )
            ...
        
          • 461
             // record为你这一行的数据,就是dataSource里面的每一项 
             const isDestory = record.isDestory;
              render: (text, record) => (
                  <div>
                      <button disabled={!isDestory}>删除</button>
                  </div>
              )
            • 190
            render: (text, record, opreate) => {
              const { isDestory } = record;
              return (
                <div>
                  <span>详情</span>
                  <span style={{color: isDestory ? '' : ''}}>删除</span>
                </div>
              )
            }

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

              撰写回答

              登录后参与交流、获取后续更新提醒