首页 > 其他分享 >element-ui el-table 高度自适应

element-ui el-table 高度自适应

时间:2022-09-29 13:44:17浏览次数:47  
标签:el clientHeight element ui var table

element-ui  el-table 高度自适应


<div ref="searchHeader" class="div_search search_title" :class="{ div_search_index: !isExpand }">
<el-form ref="dataForm" :model="listQuery" label-position="left" label-width="70px">
<el-form-item class="div_item input_search" label="所属机构">
<org-tree @get-orgid="changeOrg"></org-tree>
</el-form-item>
<el-form-item class="div_item input_search" label="排查内容">
<el-input class="filter-item" v-model="listQuery.content"></el-input>
</el-form-item>
<div class="left">
<el-button @click="getList(1)" class="button_search" size="medium" type="primary">查询</el-button>
<el-button @click="editClick(null,'新建')" class="button_search" size="medium" type="primary">新建</el-button>
</div>
</el-form>
</div>
<el-table
      ref="refTable" :data="list"
      v-loading="listLoading"
      element-loading-text="加载中" fit
      highlight-current-row
      style="width: 100%"
      :max-height="maxHeight">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column  min-width="120" align="center" prop="orgName" label="所属机构"></el-table-column>
      <el-table-column  min-width="120" align="center" prop="areaName" label="所属部门"></el-table-column>
      <el-table-column  min-width="150" align="center" prop="stateSign" label="状态">
         <template slot-scope="scope">{{ scope.row.stateSign | state}}</template>
      </el-table-column>
      <el-table-column  min-width="150" align="center"label="操作">
         <template slot-scope="scope">
       <el-button @click="editClick(scope.row,'编辑')">编辑</el-button>
  </template>
</el-table>
data: function () {
return {
    maxHeight: null,
  };
},
methods:{
  setHeight: function () {
   var that = this;
   var screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
   that.maxHeight = screenHeight - that.$refs.searchHeader.clientHeight - 156;
  },
}

 

标签:el,clientHeight,element,ui,var,table
From: https://www.cnblogs.com/Jishuyang/p/16741195.html

相关文章

  • [oeasy]教您玩转python - 0002 - 你好世界(hello world!)
    你好世界......
  • 提高生产力的 IntelliJ 插件
    提高生产力的IntelliJ插件Photoby迪伦·费雷拉on不飞溅今天,我就如何增强开发人员的最爱之一—IntelliJIDE向您提出一些建议。我准备的插件是“通用”的,所以......
  • Tensorflow savedmodel to graph def
    1.使用tf2onnx工具,把savedmodel转换为tf的graphdef(不带function,也就是tf1的计算图)https://github.com/onnx/tensorflow-onnx/blob/v1.9.3/tf2onnx/tf_loader.py#-*......
  • 用swagger-ui来生成webapi接口文档并可以在线测试
    用swagger-ui来生成webapi接口文档并可以在线测试Swagger-UI简单而一目了然。它能够纯碎的基于html+javascript实现,只要稍微整合一下便能成为方便的API在线测试工具。项目的......
  • 67-@RequestParam、@PathVariable、@RequestBody、@ModelAttribute的用法
    @RestController@RequestMapping("/sys-user")publicclassSysUserController{@AutowiredprivateISysUserServicesysUserService;@PostMapping("/get......
  • Parallels Desktop 18 Mac(兼容Intel和M系列)
    哪里能下载支持M1的PD18虚拟机?ParallelsDesktop18forMac可在Mac上同时运行Windows和macOS,无论您需要运行没有Mac版本的Windows程序,还是从PC切换到Mac并需......
  • Qt6.2.4 Arduino 上位机
    参考https://zhuanlan.zhihu.com/p/507277665https://blog.csdn.net/weixin_43491568/article/details/102959168环境环境版本windows10Qt6.2.4Qt......
  • EXCEL如何实现分类
    目的:根据第二列的不同计划线分类来筛选出第一列的料号第一步:选中两列第二步:点击插入,选择"数据透视表"效果图图一:两列都选择行图二:一列设置为筛选器,一列设置为......
  • C#中的简单DBHelper类
    publicclassDBHelper{//创建数据库连接字符串publicstaticstringconstr="server=.;database=你的数据库名称;Uid=数据库登录用户名;pwd=数据库登录密码";//......
  • CSS中Cellpadding和 Cellspacing用法和定义
    https://www.cnblogs.com/LiuSiLence/p/9023293.htmlCellspacing,属性表示两个单元格之间的距离cellpadding,是补白,是指单元格内文字与边框的距离。 ......