解决element的Table表格组件的高度问题( height只能是数字或者字符串 ),实现height: calc(100vh

注：也可直接将el-table的height属性绑定为字符串：calc(100vh - 260px) 实现为同样的效果， 260 是顶部和底部导航以及部分自定义布局；例：

<template><el-table:data="tableData":height="` calc(100vh - 260px)`"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><script>export default {data() {return {tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}]}}}
</script>

一、定义获取浏览器窗口高度的js文件

相当于用js实现了 height: calc(100vh - 260px); 的效果

注意： 260 是顶部和底部导航以及部分自定义布局；
autoTableHeight.js

//获取浏览器窗口高度,处理Element的Table组件的高度问题（height只能是数字或者字符串）
function autoTableHeight() {var winHeight = 0;if (window.innerHeight) {winHeight = window.innerHeight;} else if (document.body && document.body.clientHeight) {winHeight = document.body.clientHeight;} //通过深入Document内部对body进行检测，获取浏览器窗口高度else if (document.documentElement && document.documentElement.clientHeight) {winHeight = document.documentElement.clientHeight;}// 260  是顶部和底部导航以及部分自定义布局  ；相当于用js实现了 height: calc(100vh - 260px); 的效果return winHeight - 260;
}//浏览器窗口变化时
window.onresize = function() {autoTableHeight();
};//浏览器重新加载时
window.onload = function() {autoTableHeight();
};export default autoTableHeight;

在组件中引入js文件，并给el-table绑定height

在组件内部，el-table绑定height, :height="tableHeight"
表格设置height属性后，表头得以固定，且超出该高度会出现滚动条
注意，我这里省去了头部和顶部以及侧边栏的代码。

<template><div class="inform-manage comn_bg"><el-table:data="tableData"class="multiple-table"border:highlight-current-row="true":height="tableHeight":default-sort="{ prop: 'name', order: 'descending' }"@sort-change="handleSortChange"@selection-change="handleSelectionChange"ref="multipleTable"tooltip-effect="dark"style="width: 100%;"><el-table-columnfixed="left"type="selection"width="55"align="center"></el-table-column><el-table-columnsortableprop="name"label="通知公告标题"width="120"align="center"></el-table-column><el-table-columnsortableprop="address"label="发布单位"align="center"show-overflow-tooltip></el-table-column><el-table-columnsortableprop="remark"label="发布人"align="center"width="120"></el-table-column><el-table-columnsortableprop="date"label="发布时间"align="center"width="120"></el-table-column><el-table-columnsortableprop="address"label="内容概述"align="center"width="120"></el-table-column><el-table-columnsortableprop="remark"label="备注"align="center"width="120"></el-table-column><el-table-column sortable label="排序号" width="120" align="center"><template slot-scope="scope" align="center"><el-inputclass="sort_input"v-model="scope.row.sortNum"></el-input></template></el-table-column><el-table-column sortable label="状态" align="center"><template slot-scope="scope"><span>{{ scope.row.status | filterStatus }}</span></template></el-table-column><el-table-column sortable label="操作" align="center" width="200"><template slot-scope="scope"><button class="download_btn"><i class="el-icon-download"></i> 下载</button><button class="detail_btn"><i class="el-icon-tickets"></i> 发布详情</button></template></el-table-column></el-table></div></div></div>
</template>
<script>
import autoTableHeight from "@/utils/autoTableHeight.js"; // 1. 引入刚刚定义的js文件
export default {data() {return {tableData: [{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",remark: "备注信息1",sortNum: 1,status: true},{date: "2016-05-02",name: "张晓",address: "上海市普陀区金沙江路 1518 弄",remark: "备注信息2",sortNum: 2,status: false},{date: "2016-05-04",name: "阿厌",address: "上海市普陀区金沙江路 1518 弄",remark: "备注信息3",sortNum: 3,status: true}],multipleSelection: []};},computed: {tableHeight() { return autoTableHeight(); // 2. 调用函数，返回高度}},methods: {handleSelectionChange(val) {this.multipleSelection = val;console.log("通知table data:", val);},handleSortChange({ column, prop, order }) {console.log("通知页排序变化：", prop);}},filters: {filterStatus(status) {return status ? "已发布" : "待发布";}}
};
</script>
<style lang="scss">
.inform-manage {.download_btn {background: $icon_color;border: 1px solid $icon_color;color: #fff;padding: 2px;cursor: pointer;}.detail_btn {background: #ffb800;border: 1px solid #ffb800;margin-left: 20px;color: #fff;padding: 2px;cursor: pointer;}
}
</style>

解决element的Table表格组件的高度问题( height只能是数字或者字符串 ),实现height: calc(100vh - 260px) 的效果相关推荐

解决element UI table 表格固定列单元格错位
最近在使用表格组件的固定列后,才发现表格有样式bug,在使用点击事件切换表格尺寸大小时,会发现固定列样式没有对齐,在切换页面之后,就会出现列错误的现象,如下: 解决方法: 1.给表格添加ref < ...
顶级好用的 5 款 Vue table 表格组件测评与推荐
本文首发:<顶级好用的 5 款 Vue table 表格组件测评与推荐 - 卡拉云> Vue table 表格组件作为绝大多数项目需要内嵌的组件,可谓十分重要.表格看起来虽简单,实则坑很深 ...
bootstrapr表格父子框_JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】...
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
Vue笔记（五）—— Vue render渲染/组件嵌套之iView官网案例改写Table表格组件及Modal弹窗/对话框/模态框组件内容自定义详解
缺乏耐心的读者请主要关注标红部分! 因部分内容自动转为代码格式,所以代码部分请主要关注注释部分! 1.Table表格组件内容自定义: 官网Table表格组件部分示例代码: columns12: [{t ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
vue极简代码实现自定义可编辑行及操作按钮的Table表格组件（含源码及演示视频）
效果图如下: 涉及到技术点包括: 父组件给子组件传值props.动态赋值 refs 对DOM进行操作,slot具名插槽的使用,插槽通过slot-scope给父组件传值父组件代码: <templ ...
React Table 表格组件使用教程排序、分页、搜索过滤筛选功能实战开发
React Table 表格组件使用教程 react-table 安装和使用 React Table 表格排序功能 React Table 表格搜索过滤筛选功能 React Table 表格分页功能 ...
ant design vue table表格组件实现隔行变色
ant design vue table表格组件实现隔行变色一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...

解决element的Table表格组件的高度问题( height只能是数字或者字符串 ),实现height: calc(100vh - 260px) 的效果

一、定义获取浏览器窗口高度的js文件

在组件中引入js文件，并给el-table绑定height

解决element的Table表格组件的高度问题( height只能是数字或者字符串 ),实现height: calc(100vh - 260px) 的效果相关推荐

最新文章

热门文章