提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

antd组件库使用笔记

组件笔记 Antd 使用
2023-09-11 14:21:35 时间

1、table表单，开启复选框时，多选删除，删除成功之后需要清除之前已选择的部分。此时需要给table一个

rowSelection属性，属性值里面使用selectedRowKeys和onChange配合使用

并在删除成功后将selectedRowKeys属性值清空即可
selectedRowKeys指定选中项的 key 数组，需要和 onChange 进行配合，其实质和input框的双向数据绑定是一个原理

render() {
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    return (
      <div>
        <div style={{ marginBottom: 16 }}>
          <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
            Reload
          </Button>
          <span style={{ marginLeft: 8 }}>
            {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
          </span>
        </div>
        <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
      </div>
    );
  }

 

2、form的使用，在使用form表单的组件中，使用Form.create函数处理过的组件会有一个form属性，即this.props.form。此时就可以通过this.props.form来获取表单值等操作
注意在v4版本中，废弃了Form.create转而使用Form.useForm,这两个函数都返回一个form实例

FormInstance

// 获取输入框name的值
this.props.from.getFieldValue("name")

另外：在父组件中也可以获取封装的子组件的ref，父组件想拿到子组件的 ref ，使用 antd 的 Form.create() 包装子组件之后，可以通过包装后的组件的 wrappedComponentRef 拿到子组件的实例

                <Row className="table-header-container">
                  <Col xxl={{ span: 19 }} xl={{ span: 24 }}>
                    <FilterForm
                      //@ts-ignore
                      onSearch={this.onSearch.bind(this)}
                      wrappedComponentRef={(form: any) =>
                        (this.filterform = form)
                      }
                    />
                  </Col>
                </Row>

 

 3、from表单校验

在做form表单校验时，如下代码，定义校验规则rules时，rules数组中的最后一个规则是无法生效的，原因在于，validator自定义规则必须在rules规则数组的最后一个元素

const rules: any = [
        {
            message: "参数不能为空",
            required: true,
         },
        {
            validator: (rule: any, value: any, callback: any) => {}  
        },
        {
             message: "只允许输入整型数字",
             pattern: new RegExp(/^[1-9][0-9]{0,}$/, "g"),
         }
]

 

4、table组件，自定义空状态

ConfigProvider 使用 React 的 context 特性，只需在应用外围包裹一次即可全局生效。

import { ConfigProvider } from 'antd';

// ...

export default () => (
  <ConfigProvider direction="rtl">
    <App />
  </ConfigProvider>
);

空状态配置使用属性，值为reactNode

renderEmpty
const customizeRenderEmpty = () => (
    //这里面就是我们自己定义的空状态
    <div style={{ textAlign: ‘center‘ }}>
        <Icon type="smile" style={{ fontSize: 20 }} />
        <p>空状态信息提示</p>
    </div>
);
class Home extends Component{
    render() {
        return(
            <ConfigProvider renderEmpty={customizeRenderEmpty}>
                <Table  columns={columns} dataSource={data} />
            </ConfigProvider>
        )
    }
}

 

相关文章