重构-表格

旧城等待， 2021-07-24 19:28 461阅读 0赞

参数:
      delete: PropTypes.bool,			是否增加删除
      data: PropTypes.array,			数组数据
      onDelete: PropTypes.func,			删除回调,第一个参数是删除后的所有内容
      tableHeight: PropTypes.string,	表格高度
      titleHeight: PropTypes.string,	标题行高度
      titleFontSize: PropTypes.string,	标题字体大小
      borderColor: PropTypes.string,	表格边框颜色
      cellHeight: PropTypes.string,		表格内容高度
      cellFontSize: PropTypes.string,	表格内容字体大小
      padding: PropTypes.string,		表格内容左边距
    
    使用:
      插槽指定表格的标题栏,label为标题内容,name必须和data中的要展示的数据的key一致
      <Table
        data={data}
        delete
        onDelete={_onDelete}
      >
        <TableColumn name='date' label='日期' width='100px'></TableColumn>
        <TableColumn name='name' label='姓名' width='100px'></TableColumn>      
        <TableColumn name='address' label='住址' width='180px'></TableColumn>        
      </Table>

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]  
使用:

import React,{ useState} from 'react'
    import Table from './table/table'
    import TableColumn from './table/tableColumn/tableColumn'
    
    const data=[{ 
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
              }, { 
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              }, { 
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, { 
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              },{ 
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, { 
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              }, { 
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, { 
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              },{ 
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, { 
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              }, { 
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, { 
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              },{ 
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, { 
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              }, { 
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, { 
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              }
              , { 
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, { 
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              }
            ]
    
    
    function App() { 
      
      const _onDelete = function (item,index,arr)
      { 
        console.log(arr);
      }
    
      const _onChange = function (arr)
      { 
        console.log(arr);
      }
    
      return(
    
        <div>
          <Table
            data={ data}
            delete
            onDelete={ _onDelete}
          >
            <TableColumn name='date' label='日期' width='100px'></TableColumn>
            <TableColumn name='name' label='姓名' width='100px'></TableColumn>      
            <TableColumn name='address' label='住址' width='180px'></TableColumn>        
          </Table>
        </div>
      )
    }
    
    export default App

table.jsx：

import React,{ useState,useEffect,useCallback,useRef} from 'react'
    import PropTypes from 'prop-types'
    import CheckBox from '../../Buttons/checkBox/checkItem'
    // import TableColumn from './tableColumn/tableColumn'
    // import TableItem from './tableItem/tableItem'
    
    import './table.css'
    
    function App(props) { 
    
      const [tableData, setTableData] = useState([]);
      const [checkAll, setCheckAll] = useState(false);
      const [deleteIndex, setDeleteIndex] = useState(-1);
      const [tempArr, setTempArr] = useState([]);
      const tablef = useRef(null);
    
      useEffect(() => { 
        console.log(props.children);
        setTableData(props.data);
    
        props.tableHeight && tablef.current.style.setProperty('--titleHeight', props.tableHeight);
        props.titleHeight && tablef.current.style.setProperty('--titleHeight', props.titleHeight);
        props.titleFontSize && tablef.current.style.setProperty('--titleFontSize', props.titleFontSize);
        props.borderColor && tablef.current.style.setProperty('--borderColor', props.borderColor);
        props.cellHeight && tablef.current.style.setProperty('--cellHeight', props.cellHeight);
        props.cellFontSize && tablef.current.style.setProperty('--cellFontSize', props.cellFontSize);
        props.padding && tablef.current.style.setProperty('--padding', props.padding);
      },[])
    
    
      const _delete = useCallback((item,index) => { 
        let arr = tableData.filter((key, value) => { 
          return value != index;
        })
        props.onDelete(item, index, arr);
        setTableData(arr);
    
    
      },[tableData])
    
      const _boxAllClick = useCallback((index, state) => { 
    
        setCheckAll(!checkAll);
        if (state)
        { 
          setTempArr(tableData);
          props.onChange(tableData); 
    
        } else { 
          setTempArr([]);
          props.onChange([]);
        }
        
        
      },[checkAll,tableData])
    
      
      const _boxClick = useCallback((index, state,itemData) => { 
    
    
        if (state)
        { 
          tempArr.push(itemData);
          setTempArr(tempArr);
          console.log(tempArr);
    
        } else { 
          // let arr = _deleteData(index);
          // console.log(arr);
          setTempArr([]);
        }
    
    
    
      }, [])
    
    
      const _deleteData = useCallback((currentIndex) => { 
        let arr = tempArr.filter((item, index) => { 
          return item.id!=currentIndex
        })
        // setTempArr((v)=>arr);
        return arr;
      },[])
    
      return(
        
        <div className='js-table-container' ref={ tablef}>
          { /* 表头 */}
          <table
            className='js-table-top'
            border='1px'
    
          >   
              { /* 设置每列样式 */}
            <colgroup>
              { props.choose&&<col width='80px'></col>}
                { 
                  props.children.map((item, index) => { 
                    return (
                      <col span='1'key={ item+index} width={ item.props.width?item.props.width:'100px'}></col>
                    )
                  })
                }
              { props.delete&&<col width='80px'></col>}
              </colgroup>
            <tbody>
              <tr
                
                align='left'
                className='jf-tabel-title'
              >
                { props.choose && <th><CheckBox boxSize={ '20px'} boxClick={ (i,state) => {  _boxAllClick(-1,state) }} ></CheckBox>全选</th> }
                { props.children}
                { props.delete&&<th>删除</th>}
                <td width='15px'></td>
              </tr>
            </tbody>
          </table>
    
          { /* 表数据 */}
          <div
            className='js-table-body-container'
          >
            <table
              className='js-table-body'
              border='1px'
              
            > 
              { /* 设置每列样式 */}
              <colgroup>
              { props.choose&&<col width='80px'></col>}
              { 
                props.children.map((item, index) => { 
                  return (
                    <col span='1'key={ item+index} width={ item.props.width?item.props.width:'100px'}></col>
                  )
                })
              }
                { props.delete&&<col span='1' width='80px'></col> }
              </colgroup>
              <tbody>
                { 
                  tableData.map((item, index) => { 
                    item.id = index;
                    return (
                      <tr
                        key={ item + index}
                        className='js-table-body-row'
                      >
                                                                                                                                                             { /* {checkAll} */}
                        { props.choose && <td className='jf-table-body-td'><CheckBox boxSize={ '20px'} boxClick={ (i,state) => {  _boxClick(index,state,item) }}   ></CheckBox></td>}
                        {                                                                                                                                                    
                          props.children.map((val, key) => { 
                            return (
                              <td
                                key={ val + key}
                                className='jf-table-body-td'
                              >
                                { 
                                  item[val.props.name]
                                }
                              </td>
                            
                            )
                          })
                        }
                        
                        { props.delete&&<td align='center' onClick={ () => {  _delete(item, index) }}><span className='js-table-body-delete'>删除</span></td>}
                      </tr>
                    )
                  })
                }
              </tbody>
    
            </table>
          </div>
    
    
        </div>
      )
    }
    
    export default App
    
    App.propTypes = { 
      delete: PropTypes.bool,
      data: PropTypes.array,
      onDelete: PropTypes.func,
      tableHeight: PropTypes.string,
      titleHeight: PropTypes.string,
      titleFontSize: PropTypes.string,
      borderColor: PropTypes.string,
      cellHeight: PropTypes.string,
      cellFontSize: PropTypes.string,
      padding: PropTypes.string,
      
    }
    
    App.defaultProps = { 
      data: [],
      onDelete:()=>{ },
    }

table.css:

.js-table-container { 
      display: inline-block;
      box-sizing: border-box;
      margin-left: 5px;
    
      --tableHeight: 400px;
      --titleHeight: 30px;
      --titleFontSize: 14px;
      --borderColor: #aaa;
      --cellHeight: 35px;
      --cellFontSize: 12px;
      --padding: 10px;
    }
    
    .js-table-top { 
      /* width: 100%; */
      box-sizing: border-box;
      table-layout: fixed;
      border-collapse: collapse;
      border: none;
      border-color: var(--borderColor);
    }
    
    .jf-tabel-title { 
      color: #909399;
      height: var(--titleHeight);
      font-size: var(--titleFontSize);
      box-sizing: border-box;
    }
    
    .jf-tabel-title > th { 
      padding-left: var(--padding);
    }
    .jf-tabel-title > td { 
    }
    
    .jf-table-title-td { 
      /* padding-left: var(--padding); */
    }
    
    .js-table-body-container { 
      /* width: 100%; */
      box-sizing: border-box;
      max-height: var(--tableHeight);
      border-right: solid 1px #aaa;
      border-bottom: solid 1px #aaa;
      overflow-y: scroll;
    }
    
    /* .js-table-body-container::-webkit-scrollbar { width: 15px; } .js-table-body-container::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #ccc; } .js-table-body-container::-webkit-scrollbar-track { } */
    
    .js-table-body { 
      box-sizing: border-box;
    
      table-layout: fixed;
      border-collapse: collapse;
      border: none;
      border-color: var(--borderColor);
      border-top: none;
    }
    .js-table-body-row { 
      height: var(--cellHeight);
      font-size: var(--cellFontSize);
    }
    .jf-table-body-td { 
      padding-left: var(--padding);
    }
    
    .js-table-body-delete { 
      display: inline-block;
      padding: 5px 10px;
      background-color: red;
      color: white;
      font-weight: bold;
      cursor: pointer;
    }
    
    /* 通过col设置width,table宽度不能设置成100%,否则无效 给tabel属性设置border后,需要在css中设置border:none;去除表格四周重叠边框 */

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/cdc1d39fcb6e4761be6bd2072d48b3aa.png