zoukankan      html  css  js  c++  java
  • 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') // 当天之后的时间不可选,包括当天
    }
    
  • 相关阅读:
    共享纸巾更换主板代码分析 共享纸巾主板更换后的对接代码
    Python Django Ajax 传递列表数据
    Python Django migrate 报错解决办法
    Python 创建字典的多种方式
    Python 两个list合并成一个字典
    Python 正则 re.sub替换
    python Django Ajax基础
    Python Django 获取表单数据的三种方式
    python Django html 模板循环条件
    Python Django ORM 字段类型、参数、外键操作
  • 原文地址:https://www.cnblogs.com/WhiteM/p/14068663.html
Copyright © 2011-2022 走看看