美文网首页
proTable自定义搜索表头

proTable自定义搜索表头

作者: Jesse_001 | 来源:发表于2023-05-09 11:01 被阅读0次

proTable的表头搜索字段自定义,使用Column的renderFormItem属性配置

const [ assignees, setAssignees] = useState([])
const setMyself = () => {
    if (searchRef.current) {
        let userInfo = JSON.parse(sessionStorage.getItem('user_info'))
        // console.log(userInfo)
        if(userInfo && userInfo.id){
            searchRef.current.setFieldValue("assigneeId",userInfo.id);
        }
      }
  }
//proTable 配置属性:formRef={searchRef}
// colunm属性配置
renderFormItem: (item, props,form) => {
        if (props.type === 'form') {
          return null;
        }
        return (
            <Row gutter={8}>
                <Col span={22}>
                    <Select
                        {...props.fieldProps}
                        allowClear
                        placeholder="请选择"
                        value={form.getFieldValue(item.dataIndex)}
                        onChange={(value)=>{
                            form.setFieldValue(item.dataIndex,value)
                        }}
                        >
                            {assignees.map(item => {
                                return <Option key={'assigns'+item.id} value={item.id}>{item.name}</Option>
                            })}
                    </Select>
                </Col>
                <Col span={2}>
                    <div style={{height: '32px',lineHeight:'32px',color:'#3366ff',cursor:'pointer',textAlign:'right'}} onClick={()=>{setMyself()}}>我</div>
                </Col>
            </Row>
        );
      }

相关文章

网友评论

      本文标题:proTable自定义搜索表头

      本文链接:https://www.haomeiwen.com/subject/gdersdtx.html