首页 > 其他分享 >react antd 表格固定高度

react antd 表格固定高度

时间:2023-11-23 17:34:40浏览次数:41  
标签:padding ant 表格 100% 高度 height react table antd

<div className="ad-body">
  <Table
    className="area-drawing-table"
    rowClassName={(record, index) =>
      index === selectIndex ? 'ant-table-row-selected' : ''
    }
    rowKey={record => record.key}
    columns={areaDrawingColumns}
    dataSource={detailDt?.areaList || []}
    pagination={false}
    scroll={{ y: '100%' }}
  />
</div>;

// 固定高度设置
.ad-body {
  width: 100%;
  height: 240px;

  // 高度
  .ant-table-wrapper {
    height: 100%;
    .ant-spin-container {
      height: 100%;
      .ant-table-body {
        height: calc(100% - 44px) !important;
        .ant-empty {
          padding-top: 52px;
        }
      }
    }
  }

  // // th td设置
  // .area-drawing-table {
  //   border: 1px solid rgba(0, 0, 0, 0.1);
  //   border-top: transparent;
  //   tr {
  //     th {
  //       padding: 8px 16px;
  //     }
  //     td {
  //       padding: 3px 16px;
  //     }
  //   }
  // }
}

 

标签:padding,ant,表格,100%,高度,height,react,table,antd
From: https://www.cnblogs.com/sangzs/p/17852083.html

相关文章

  • 视觉差缓动效果的轮播--React版
    React实现视觉差效果缓动轮播效果如下(图片帧率低看起来有点卡顿,看个大概就行):分享一下思路:1.正常引入一个轮播组件(站在巨人肩膀省时省力),去除指示点、引导箭头等不需要的元素,有些组件支持配置,不支持就手动覆盖CSS样式了2.找到组件中用于显示展示当前图片的类名3.添加transform......
  • vue element 表格定位到某行
    /***@description:通过表格索引定位表格的位置*@param{refName}table的ref值*@param{index}table的索引值*@return:*@author:hch*/$tableScrollMove(refName,index=0){if(!refName||!this.$refs[refName])r......
  • 在React中使用`typeit`库
    在React中使用typeit库安装npminstalltypeit-react在需要用到的组件导入,使用importTypeItfrom"typeit-react";consttext()=>{return(<div><TypeIt>文字打字效果</TypeIt></div>);};exportdefaulttext使用option方式配......
  • React中store的使用(redux、redux-tookit)及store数据持久化(redux-persist)
    React中store的使用(redux、redux-tookit)及store数据持久化(redux-persist)安装npminsatllreact-reduxnpminstall@reduxjs/toolkitnpminstallredux-persist简单使用store//counterSlice.jsimport{createSlice}from'@reduxjs/toolkit'exportconstcounter......
  • 表格制作软件排行榜,热门做表格的软件推荐
    在数字化时代,表格不仅仅是企业管理和数据整理的重要工具,更是学术研究、项目规划以及日常生活中必不可少的一部分。为了更高效地进行表格制作,选择一款优秀的表格制作软件是至关重要的。在众多的软件中,我们特别推荐一款备受好评的表格制作软件——VeryReport。编辑搜图请点击输入图片......
  • 一个.Net开源的协作办公套件,包括文档、表格、演示文稿和表单
    推荐一个开源的文档协作办公套件,可以很好的满足团队对方便、高效、安全的方式来处理文档工作,促进团队协作和信息共享。项目简介ONLYOFFICE是一个开源的办公套件,包括文档、表格、演示文稿和表单等应用程序。可以很好低与微软Office兼容,允许多人实时在线对同一个文档进行协作编......
  • wps表格怎么打印选中区域的内容?
    打印选中区域的内容,您可以按照以下步骤进行操作:选择要打印的区域打开WPS表格,在工作表中选择您希望打印的区域。您可以拖动鼠标或使用键盘中的方向键来选择单元格。设置打印区域一旦您选中了需要打印的区域,点击顶部菜单栏中的"文件"选项。在弹出菜单中,选择"打印"选项。......
  • 前端项目实战叁佰伍拾陆react-admin和material ui-处理形成树状数据结构2
    dataProviders.getStyleTree('t_prod_category','t_prod_style').then((res:any)=>{console.log(res,"resssssssss")letarr:any=[]letarr1:any=[{key:0,title:"品类管理",......
  • 前端项目实战叁佰伍拾伍react-admin和material ui-处理形成树状数据结构1
    if(data!==undefined){lettemp:ITreeData[]=[{key:'0',title:'工厂管理',children:newArray<ITreeData>()}];//向从数据库查询到的数据中添加Tree结构所需要的字段,key使用id,title使用name;data.forEach(it=>{......
  • React 应用构建(环境)
    可以少去理解一些不必要的概念,而多去思考为什么会有这样的东西,它解决了什么问题,或者它的运行机制是什么?一.环境搭建工作编辑器:VisualStudioCode。Javascript解析器、运行环境Node.js的安装。npm安装:npm是Node.js的软件包管理器。二.项目构建1.脚手架构建项......