页面多数据折叠展开显示

快来打我* 2023-10-08 09:41 70阅读 0赞

const {
         useState } = React;
      const [state, setState] = useState({
         pageSize: 5 });   //设置默认显示的条数
    
    //对后台传来的数据进行处理
     let data = [];
      if (mxadata && mxadata.length > 0) {
        
        if (mxadata.length < 6) {
        
          data = mxadata;
        } else if (state.pageSize === 'all') {
        
          data = mxadata;
        } else {
        
          for (let i = 0; i < state.pageSize; i+=1) {
        
            data.push(mxadata[i]);
          }
        }
      }
    
    // 页面数据展示控制
    
    <div>
          <Table
            style={
        {
         width: '80%' }}
            pagination={
        false}
            dataSource={
        data}
            columns={
        columns}
          />
          {
        mxadata ?(mxadata.length > 5 ? (
            <div style={
        {
         textAlign: 'center' }}>
              {
        state.pageSize === 5 ? (
                <a
                  onClick={
        () => {
        
                    setState({
         ...state, pageSize: 'all' });
                  }}
                >
                  展开 <Icon type="down" />
                </a>
              ) : (
                <a
                  onClick={
        () => {
        
                    setState({
         ...state, pageSize: 5 });
                  }}
                >
                  收起 <Icon type="up" />
                </a>
              )}
            </div>
          ) : (
            ''
          )):''}
        </div>

### 关注公众号【程序员每日一学】让我们每天一起学习进步～ ###

![在这里插入图片描述][305987ebf35f415eb592cedbf39bf01e.jpg]

[305987ebf35f415eb592cedbf39bf01e.jpg]: https://img-blog.csdnimg.cn/305987ebf35f415eb592cedbf39bf01e.jpg