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') // 當天之后的時間不可選，包括當天
}