2021-04-19

前端

Antd组件运用

文章目录

1. antd组件运用
2. Card
3. Grid
4. Table
5. Form

6. Checkbox

6.0.1. Checkbox.Group
6.0.2. 垂直checkbox.group

7. Select选择器

8. Popover

8.1. MoreNotes

antd组件运用

Card, Grid, Table, Form, Checkbox

Card

最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。

1
2
3

<Card title="Card title" bordered={false}>
    Card content
</Card>

headStyle/ BordyStyle可以指定卡片头和卡片身的样式
bordered 是否有边框
extra : 卡片右上角区域

Grid

Table

<Table dataSource={dataSource} columns={columns} />;

filter过滤功能

通过在表格列定义上定义筛选属性 filters: [{text, value}, ...]以及筛选方式onFilter: (value, record) => record.name.indexOf(value) === 0,

filterMultiple可以指定是否可以选择多个筛选项

排序功能

在表格列定义上定义排序属性 sorter: (a, b) => a.age - b.age,即可实现排序。可以设定默认排序方式

筛选功能可以与排序功能同时指定，其会对该列执行默认排序(sortDirections)?

自定义筛选菜单

通过 filterDropdown 自定义的列筛选功能。默认的筛选功能界面由一个复选框（单选框）构成，而通过自定义的方式可以实现更加复杂的界面。一个简单的搜索界面可以参考官网“自定义筛选排序部分”，它通过在列定义中定义filterDropdown、onFilter和onFilterDropdownVisibleChange三个属性实现。

filterDropdown实现自定义界面
onFilter(value, record){}实现自定义逻辑

...
  getColumnSearchProps = dataIndex => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={node => {
            this.searchInput = node;
          }}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            Search
          </Button>
          <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
            Reset
          </Button>
        </Space>
      </div>
    ),
    filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: (value, record) =>
      record[dataIndex]
        ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
        : '',
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => this.searchInput.select(), 100);
      }
    },
    render: text =>
      this.state.searchedColumn === dataIndex ? (
        <Highlighter
          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
          searchWords={[this.state.searchText]}
          autoEscape
          textToHighlight={text ? text.toString() : ''}
        />
      ) : (
        text
      ),
  });

  handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    this.setState({
      searchText: selectedKeys[0],
      searchedColumn: dataIndex,
    });
  };

  handleReset = clearFilters => {
    clearFilters();
    this.setState({ searchText: '' });
  };
  
...

指的注意的是filterDropdown的入参：{ setSelectedKeys, selectedKeys, confirm, clearFilters }，它是antd控件内部定义的。

selectedKeys是一个数组，它与records的笛卡尔积每个元素都会传入onFilter函数以判定某个record是否应该留下来。

setSelectedKeys是设置selectedKeys的辅助函数

confirm函数的每一次调用都会在内部执行一次onFilter函数

clearFilters的功能不详

在创建列定义的时候使用了闭包，这意味着当<Table实例如果没有被重新render，那么闭包环境不会改变。

pagination

当数据量较大时，采用分页的方式。pagination用于指定分页方式(每页显示多少数量、默认显示多少数量)

getPopupContainer指定自定义弹出框的挂在DOM位置。

滚动条

1	<Table datasource columns scroll={{y: 600}} />

.antd4-table-body{
    overflow-y: auto !Important;
}
//当无需展示滚动条时，隐藏滚动条

Form

表单每一个条目由标签和内容组组成，它们的宽度控制方式属性为labelCol:object和wrapperCol:object

name属性为作为表单字段id前缀使用

Form.Item表单项

表单字段组件，用于数据双向绑定、校验、布局等。

被设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

你不再需要也不应该用 onChange 来做数据收集同步（你可以使用 Form 的 onValuesChange），但还是可以继续监听 onChange 事件。
你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。
你不应该用 setState，可以使用 form.setFieldsValue 来动态改变表单值。

设定了name属性的Item其内组件的value会被表单接管，如果不设置name属性Form.Item起着布局的效果。

Form.List表单数组

Form.List 下的字段需要包裹 Form.List 本身的 name，比如：

<Form.List name="users">
  {fields =>
    fields.map(field => (
      <React.Fragment key={field.key}>
        <Form.Item name={[field.name, 'name']} {...someRest1} />
        <Form.Item name={[field.name, 'age']} {...someRest1} />
      </React.Fragment>
    ))
  }
</Form.List>

依赖则是：['users', 0, 'name'],field.name为0,1,2…数组下标。

FormList里面的FormList怎么设置？

name 为数组时的转换规则？

当 name 为数组时，会按照顺序填充路径。当存在数字且 form store 中没有该字段时会自动转变成数组。因而如果需要数组为 key 时请使用 string 如：['1', 'name']。

`validateFields`


validateFields	触发表单验证	(nameList?: NamePath[]) => Promise

以上是`antd FormInstance` `validateFields`方法的文档说明。通过传入表单待验证表单项的路径即可验证。

巨坑

在实践中，发现验证表单的时候需要传入的NamesPath需要精确到每一个表单项。验证的每一个表单项都需要指定路径。否则验证函数像没有运行一样。

Checkbox

Checkbox.Group

options 可选项

options : {label:, value: } []
value 选中的值/ defaultValue
onChange变化时的回调

垂直checkbox.group

.antd-checkbox-group {
    display: flex;
    flex-direction: column;
    align-items: flext-start;
    overflow-y: auto;
    max-width: 100px;
    max-height: 200px;
    border: 1px solid green;
    border-radius: 4px;
    padding: 5px;
}

Select选择器

下拉选择器。

options

可以定制回填内容？ optionLabelProp

Popover & PopoverConfirm

MoreNotes

当你为 Form.Item 设置 name 属性后，子组件会转为受控模式。因而 defaultValue 不会生效。你需要在 Form 上通过 initialValues 设置默认值。受控模式下：defaultValue不会生效？

野生芦苇

价值、合作、方法