美文网首页
vue设置表格高度自适应

vue设置表格高度自适应

作者: 令武 | 来源:发表于2018-11-20 15:30 被阅读0次

    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

    相关文章

      网友评论

          本文标题:vue设置表格高度自适应

          本文链接:https://www.haomeiwen.com/subject/aekxqqtx.html