vue设置表格高度自适应

1、首先定义一个public.mixin.js（mixin适用于多个页面需要使用到计算高度公共方法）

export default {

    data() {

        return {

            screenHeight: document.body.clientHeight, // 这里是给到了一个默认值 （这个很重要）

            tableHeight: null, // 表格高度 

        }

    },

    watch: {

        // 监听屏幕高度改变表格高度

        screenHeight(val) {

          // 初始化表格高度

          console.log(this.$refs.header.offsetHeight)

          this.tableHeight = val - (this.$refs.header.offsetHeight + 150) + "px";

        }

    },

    mounted() {

        // 监听屏幕高度

        window.onresize = () => {

            return (() => {

                window.screenHeight = document.body.clientHeight;

                this.screenHeight = window.screenHeight;

            })();

        };

    }

}

2、在index.vue文件里面编写

<div ref="header"></div>

<el-table :height="this.tableHeight">

</el-table>

<script>

import publicMinxin from "../../../common/js/public.mixin.js";

export default {

mixins: [publicMinxin],

}

// 请求表格数据后添加

// 初始化表格高度

this.tableHeight =

            document.body.clientHeight -

            (this.$refs.header.offsetHeight + 150) +

            "px";

</script>

3、大概就这些内容谢谢大家关注，END