antd组件库的使用

1.modal

a.确定框是直接在函数中编写弹出,不需要在页面中有dom
// 触发evaluateClick函数,页面直接弹框
evaluateClick(id) {
    // 评价弹框
    Modal.confirm({
        maskClosable: false,
        centered: true,
        iconType: ' ',
        okText: '提交',
        cancelText: '取消',
        title: '检测结果评价',
        onOk: () => {},
        onCancel: () => {},
        content: (
            
                {
                    this.isCorrect.map(item => item.key ? ({item.name}) : '')
                }
            
        )
    })
}

2.table

a.columns的dataIndex属性<=>elementyUI表格的colunm的prop属性,与后台返回的字段对应,显示相应的内容
antd组件库的使用_第1张图片

const columns = [{ title: 'createDate', dataIndex: 'createDate', key: 'createDate' },]

b.columns的属性在vue中是customRender,在react中是render
c.table记得设置rowKey='detectId',否则报错

image.png

b.表格多选功能,通过rowSelection.selectedRowKeys来控制选中项

// 表格默认勾选1,2,3,项
const rowSelection =  { selectedRowKeys="1,2,3" }

3.Form表单

a.getFieldDecorator工具

  1. 不再需要也不应该onChange来做同步,但还是可以继续监听onChange等事件。
  2. 你不能用控件的valuedefaultValue等属性来设置表单域的值,默认值可以用getFieldDecorator里的initialValue
  3. 你不应该用setState,可以使用this.props.form.setFieldsValue来动态改变表单值。(表单联动)

注意:括号的位置
需求:测试集加训练集总和为100.一个变大,另一个相应变小

// ****报错browser.js?e834:49 Warning: You cannot set a form field before rendering a field associated with the value.

trainPercentOnChange (e) {   // 表单联动:setFieldsValue设置form的值;numberHandle.floatSub()相加为100的函数
  this.form.setFieldsValue({  
    'modelParam2.testPercent': numberHandle.floatSub(100, e)   
  })
},


    {
        getFieldDecorator(`modelParam2.trainPercent`, {
            initialValue: 80
        })(
            
        )
    }



    getFieldDecorator(`modelParams2.testPercent`, {
        initialValue: 20
    })
    ()
    
// 正确(更改括号位置)

    getFieldDecorator(`modelParams2.testPercent`, {
        initialValue: 20
    })(
    )
  

你可能感兴趣的:(antdesign)