react业务开发笔记1

1. 自定义table空数据

import {   ConfigProvider, Table,   } from 'antd'
// 定义空数据展示
  const renderEmpty = () => (
    <Empty
      imageStyle={{
        height: 60
      }}
      description={<span>description </span>}>
      <Button type="primary" > this is btn</Button>
    </Empty>
  )
 
return(
      <ConfigProvider renderEmpty={() => renderEmpty()}>
        <Table
        />
      </ConfigProvider>
)
 

2. 动态添加操作项

  // 操作按钮
  const actionBtn = {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    fixed: tableType === 'provinices' ? false : 'right',
    align: 'center',
    width: 160,
    render: (_, record) => {
      return (
        <Space>
          <Button type="link" onClick={() => tableRecordHandle(record, 'publish')}>
            发布
          </Button>
          {record.release_status === '已发布' && (
            <Button danger type="link" onClick={() => tableRecordHandle(record, 'remark')}>
              撤回
            </Button>
          )}
        </Space>
      )
    }
  }

3. 基于usestate可以定义对象作为初始值原理使用一个usestate定义模块数据

import {  useState } from 'react'
import {  Table,   } from 'antd'
  // 表格数据
  const [tableStatus, setTableStatus] = useState({
    columns: [],
    dataSource: [],
    loading: false
  })
setTableStatus(oth=>({...oth,loading:true}))
ajax.then(res=>{
setTableStatus(oth=>({...oth,loading:false}))
  // 重命名返回数据
  const {header:columns, data:dataSource } = res
  setTableStatus(oth=>({...oth,columns,dataSource  }))
)
// 内部项与Table需要接收的参数相同，因而可以直接用展开运算符
return  < Table   {...tableStatus}  />

4. input键入搜索

        <Input
          placeholder="按enter可直接搜索"
          autoFocus
          onKeyUp={e => enterSearch(e)}
          allowClear
          onChange={e => setKeyword(e.target.value.trim())}
          value={keyword}     
        />
 
const [keyword, setKeyword] = useState('')
const enterSearch = ({ keyCode }) => {
    // enter键的keyCode是13
    if (keyCode === 13) {
      getPageTableResource()
    }
}

5. 父组件调用子组件方法(类似vue使用ref调用子组件方法 )

子组件：

import  { forwardRef, useImperativeHandle } from 'react'
const MyTable = (props, parentRef) => {
// 这里写父组件可以调用的方法
  useImperativeHandle(parentRef, () => ({
    clearSelected: () => {
      onSelectChange([], [])
    }
  }))
}
export default forwardRef(MyTable)

父组件：

import {  useRef } from 'react'
import {MyTable    } from './components'
function Enroll() {
  const childRef = useRef(null)
 
  // dosomething...
  // 父组件调用子组件暴露给父组件的函数
   myTableRef.current.clearSelected()
 
  return <MyTable ref={childRef } />
}

6. 关于radio单选防抖(需求：选中即发请求)

import { useState, useCallback, useRef } from 'react'
import { Radio} from 'antd'
import { debounce } from 'lodash'
function MyComp(){
  const [tab, setTab] = useState('1')
    // 防抖单选 useCallback防止失效，debounce防止多次点击
  const radioChange = useCallback(
    debounce(value => {
      setTab(value)
    }, 500),
    []
  )
   return ( <Radio.Group  value={tab}   onChange={e => {   radioChange(e.target.value)  }}  buttonStyle="solid">
            <Radio.Button value="1">show1</Radio.Button>
            <Radio.Button value="2">show2</Radio.Button>
        </Radio.Group>
  )
}
 

7. 表单多个子元素(默认只允许一个子元素，否则 ：表单验证失效)

import { Input, Form  } from 'antd'
const { Item, useForm } = Form
const { TextArea } = Input
export default function Myform(props) {
    const [form] = useForm()
    return ( <Form name="validate_other" {...formItemLayout} form={form} preserve={false}>
      <Item name="myItemInstance" label="展示内容"> 
        <div>这是一些别的内容</div>
         <Form.Item style={{ marginBottom: '24px' }} name="myItemInstance">
            {/* 这是此子表单项要校验的项  */}
                <TextArea rows={4} placeholder="请输入备注（限制2000字以内)" maxLength={2000} />
        <Form.Item >
      </Item>
  </Form>)
}

8. 表单内实现多选框全选按钮(支持表单验证)

全选按钮有三种状态：全选态，半选态，不选态。

全选态：选中项等于所有项
不选态：没有选中项
半选态：有选中项且选中项不等于所有项

import { useEffect, useState } from 'react'
 
function Myfil(){
// 全选
 const [isAllChecked, setIsAllChecked] = useState(false)
// 半选
  const [isIndeterminate, setIsIndeterminate] = useState(false)
// 全选按钮被change时
  const checkAllChange = e => {
    const checked = e.target.checked
    // 当全选框被触发时，首先移除半选态
    setIsIndeterminate(false)
    // 为true, 将表单内该表单项全赋值
    if (checked) {
      setIsAllChecked(true)
      setTimeout(() => {
        form.setFieldsValue({
          myItemInstance: list.map(v => v.code)
        })
      }, 100)
    } else {
    // 否则：全不赋
      setIsYearAllChecked(false)
      setTimeout(() => {
        form.setFieldsValue({
          myItemInstance: []
        })
      }, 100)
    }
  }
return (
  <Item
    rules={[
      {
        required: true,
        message: '此为必选项！'
      }
    ]}
    label="此为label"
    name="myItemInstance"
  >
    <div>
      <Checkbox
        style={{ marginTop: '6px' }}
        checked={isAllChecked}
        indeterminate={isIndeterminat}
        onChange={e => {
         checkAllChange(e)
        }}>
        全选
      </Checkbox>
    </div>
    <Form.Item name="myItemInstance">
      <Checkbox.Group style={{ marginBottom: '6px' }}>
        {Array.isArray(list) &&
          list.length > 0 &&
          list.map(item => {
            const { code } = item
            return (
              <Checkbox
                key={code}
                onChange={e => {
                  setTimeout(() => {
                    const { formYears } = form.getFieldsValue()
                    setIsAllChecked(formYears.length !== 0 && formYears.length === list.length)
                    setIsIndeterminate(formYears.length !== 0 && formYears.length !== list.length)
                  }, 0)
                }}
                value={code}>
                {code}项
              </Checkbox>
            )
          })}
      </Checkbox.Group>
    </Form.Item>
  </Item>
 
 
)
 
}

9. Madal动态赋予滚动条

<Madal bodyStyle={{maxheight:'480px',overflow:'auto'}}></Madal>

10. 表格溢出隐藏，鼠标经过时弹出内容

columns.forEach(itemCol=>{
itemCol.ellipsis = true // 溢出隐藏
itemCol.render = text => <Tooltip placement="topLeft" title={text}><span>{text}</span></Tooltip>
})

11.清空表格筛选态

columns.forEach(itemCol=>{ 
  if (itemCol.filters) {
    itemCol.filteredValue = myFilter?.[itemCol.dataIndex] || []
  }
})
 

12. 前端自动加序号

  {
        "title": "序号",
        "dataIndex": "sn",
        "key": "sn",
        "align": "center",
        "width": "100px",
        render: (i, r, c) => {
            // c : index
          return (pagination.current - 1) * pagination.pageSize + c + 1
        }
      },

13. Upload自动上传文件

先写到这，待续
以上。