vue设置表格高度自适应

Posted 2023-04-21

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

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

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

vuex实现宽高自适应

参考技术A //app.vue里设置，宽度通过栅格控制，高度通过vuex获取高度

  export default

    name: 'App',

    data()

      return

        window:

          width: document.body.clientWidth,

          height: document.body.clientHeight

       

     

    ,

    methods:

      initWindow()

        this.$store.dispatch('setWindow', this.window)

        window.onresize = () =>

          return (() =>

            this.window.width = document.body.clientWidth

            this.window.height = document.body.clientHeight

            this.$store.dispatch('setWindow', this.window)

          )()

       

     

    ,

    created()

      this.initWindow()

   

 

页面用法：

  computed:

    ...mapGetters(

      mainHeight: 'getMainHeight'

    ),

    chartStyle1()

      const height = this.mainHeight * 0.24 - 6

      return

        color: '#fff',

        width: '100%',

        height: height + 'px'