vue+element 根据父容器动态设置table高度出滚动条

可以通过CSS样式来控制表格的高度，并利用JavaScript动态地设置这个高度。

HTML:

1. <template>
2.   <el-table
3.     :data="tableData"
4.     :height="tableHeight"
5.     style="width: 100%">
6.     <!-- 列配置 -->
7.   </el-table>
8. </template>

复制代码

js:

1. <script>
2. export default {
3.   data() {
4.     return {
5.       tableData: [
6.         // 数据列表
7.       ],
8.       tableHeight: '' // 初始高度
9.     };
10.   },
11.   mounted() {
12.     this.setTableHeight();
13.     window.addEventListener('resize', this.setTableHeight);
14.   },
15.   beforeDestroy() {
16.     window.removeEventListener('resize', this.setTableHeight);
17.   },
18.   methods: {
19.     setTableHeight() {
20.       const parentHeight = this.$el.parentNode.clientHeight; // 获取父容器高度
21.       this.tableHeight = parentHeight - 100 + 'px'; // 减去其他元素高度，保留一定空间
22.     }
23.   }
24. };
25. </script>

复制代码

css:确保父级有高度父级是自顺应%高度也可以,但是不能没有!!!)

1. <style scoped>
2. /* 确保父容器有高度 */
3. .el-table {
4.   width: 100%;
5. }
6. </style>

复制代码

分析:在这个示例中，表格组件在被挂载后会计算其父元素的高度，并设置表格的height属性以顺应父元素的高度。同时，它还会在浏览器窗口巨细改变时重新计算并设置表格高度。必要注意的是，父元素的高度应该是可用的

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。