antd踩坑记录

版本

"version": "4.5.1"

table组件

取消分页栏，增加滚动条

pagination 设置false， scroll 设置y轴固定高度

<Table columns={deviceColumns}
    dataSource={tableData}
    bordered
    rowKey={(row) => row.id}
    scroll={{y: 600}}
    pagination={
      false
}/>

排序

sort字段前端排序

const columns = [
    {
        title: '中文',
        dataIndex: 'name',
        sorter:(a,b)=>a.name.localeCompare(b.name)
    },
    {
        title: '数字',
        dataIndex: 'amount',
        sorter: (a, b) => a.amount - b.amount,
    },
    {
        title: '字符串',
        dataIndex: 'value',
        sorter: (a, b) => a.value.localeCompare(b.value)
	},
    {
    	title: '字符串2',
        dataIndex: 'value'
        sorter: (a, b) => {
        let stringA = a.name.toUpperCase(); // ignore upper and lowercase
        let stringB = b.name.toUpperCase(); // ignore upper and lowercase
        if (stringA < stringB) {
            return -1;
        }
        if (stringA > stringB) {
            return 1;
        }
        // names must be equal
        return 0;
		}
    }
];

sort字段后端排序

const columns = [
    {
        title: '中文',
        dataIndex: 'name',
        sorter: true,
    },
    {
        title: '数字',
        dataIndex: 'amount',
        sorter: true,
    },
    {
        title: '字符串',
        dataIndex: 'value',
        sorter: true,
}];

Table组件中使用

<Table dataSource={dataSourceDevice}
            columns={columnsDevice}
            bordered
            rowKey={(row) => row.equipType}
            key={keyValue}
            onChange={(pagination, filters, sorter) => this.store.handleTableChange(pagination, filters, sorter)}
 />

 // 排序回调
  @action
  handleTableChange(pagination, filters, sorter) {
    console.log('sorter', sorter);
    // 调用接口获取表格数据
  }

tree组件

节点属性设置

设置父子组件不关联：checkStrictly

默认展开：defaultExpandAll

选中的节点：checkedKeys

<Tree
  checkable
  onCheck={(checkedKeys, e) => this.store.onCheck(checkedKeys, e)}
  checkedKeys={checkedKeys}
  checkStrictly
  defaultExpandAll={defaultExpandAll}
  treeData={treeData}
/>

获取半选节点

<Tree
  checkable
  onCheck={(checkedKeys, e) => this.store.onCheck(checkedKeys, e)}
  checkedKeys={checkedKeys}
  defaultExpandAll={defaultExpandAll}
  treeData={treeData}
/>

// 查看菜单选择
  @action
  onCheck(onCheck, e) {
    console.log('onCheck', onCheck, e);
    this.checkedKeys = onCheck; // 获取选中的节点
    this.halfCheckedKeys = e.halfCheckedKeys // 获取半选的节点
  }

Form组件

配合mobx修改form数据

antd的form会形成自己的数据域，这样就和mobx定义的数据域就冲突了，所以我们需要自己去设置并更新form数据

• 首先在form.item中设置表格数据
• 接着需要设置ref，用来获取form实例，ref={(e) => this.store.getForMenuRef(e)}
• 然后在mobx页面获取form实例
• 获取实例后，通过form提供的API来操作，来更新表格数据

validateMessages是用来增加表格验证的，当设置true之后，再配合rules关键字就可以触发效果，如果关键字段不填写，表格有红色提示，并且无法提交

html部分，

validateMessages是用来增加表格验证的

<Form {...layout} size={'default'}
    name="menu-form"
    ref={(e) => this.store.getForMenuRef(e)}
    onFinish={(values) => this.store.onFinish(values)}
    validateMessages={validateMessages}>
    <Form.Item name={['isShow']} label="是否展示" rules={[{ required: true }]}>
      <Radio.Group >
        <Radio value={1}>是</Radio>
        <Radio value={0}>否</Radio>
      </Radio.Group>
    </Form.Item>
    <Form.Item name={['icon']} label="图标">
      <Input placeholder={'输入icon'}/>
    </Form.Item>
    <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 18 }}>
      <Button type="primary" htmlType="submit">
        提交
      </Button>
    </Form.Item>
</Form>

js 部分

import { action, observable, computed, runInAction, autorun } from 'mobx';
import moment from 'moment';
import React from 'react';
export default class Store {
  constructor () {
  }
  
  @observable isShow = ''; // 对应表格的name = isShow
  @observable icon = ''; // 对应表格的name = icon
  @observable formMenuRef = null; // 获取form实例
  @observable validateMessages = {
    required: '${label} 未填写!',
  };
  
   // 1. 获取form实体
  @action
  getForMenuRef(e) {
    console.log('eee', e);
    this.formMenuRef = e;
  }
  
  // 2. 新建的时候初始化表格数据
  /**
   * 获取列表数据
   * @returns {Promise<void>}
   */
  @action
  async getMenu() {
    //  获取接口数据之后，初始化表单数据
    if (res) {
      runInAction(() => {
        if (this.formMenuRef) {
          this.formMenuRef.setFieldsValue({
            isShow: 1,
            icon: '',
          });
        }
      })
    }
    
    // 获取接口数据之后，如果报错没有form实例，则需要延迟初始化数据
    // setTimeout(() => {
    //   this.formMenuRef.setFieldsValue({
    //       isShow: 1,
    //       icon: '',
    //     });
    // }, 100);
  }
}

// 3. 编辑form数据
 @action
 editData() {
 	// 1. 首先从接口获取需要编辑的数据
    this.curentEdit = '这里赋值你需要编辑的数据'
    
    // 2. 通过setFieldsValue把编辑的数据赋值到表单数据域中
    this.formMenuRef.setFieldsValue({
        isShow: this.curentEdit.isShow,
        icon: this.curentEdit.icon
    });
 }
 
 // 4. 提交form数据
 @action
 onFinish(values) {
 	// values 就是你操作的表单数据，比如我这里的values就是{ isShow: true, icon: '123'}
    // 我们通过接口提交数据之后，需要清空表单
    
    // 通过resetFields清空表单
    this.formMenuRef.resetFields();
 }
  

日期选择器

时间限制

<RangePicker
    size="large"
    disabledDate={this.disabledDate}
    style={{ marginLeft: 10 }}
    defaultValue={keyValue}
    key={keyValue}
    onChange={(dates, dateStrings) => this.store.onChangeEchart(dates, dateStrings, 1)}
/>

//限制当天之前的日期不可选
disabledDate(current) {
  	return current && current <moment().subtract(1, "days"); //当天之前的不可选，不包括当天
	//return current && current < moment().endOf(‘day’); //当天之前的不可选，包括当天
    return current && current > moment().subtract(1, 'days') // 当天之后的时间不可选，包括当天
}