element Table表格错位，固定fixed错位

表格错位图

 

问题：数据返回会产生从错乱

 1.解决问题

绑定

htmel

 

methods

  doLayout() {

      if (this.$refs.multipleTable) {

        this.$nextTick(() => {

          this.$refs.multipleTable.doLayout()

        })

      }

    },

这里要注意的是要判断$refs

 

watch 监听

竟然是数据返回会导致固定右侧发生错乱，那么就要监听数据返回时调用此方法

 

  watch: {

    tableData(val) {

      this.tableData = val

      this.doLayout()

    },

  }

2.浏览器

上面是数据返回发生错乱，但同样浏览器窗口缩小放大也会产生错乱，这里就要用到 window.onresize监听浏览器窗口

解决：

 在定义data两个变量值

 screenWidth: '',

  screenHeight: ''

 

mounted 

 // fixed浏览器窗口缩小放大导致错位

    this.screenWidth = document.body.clientWidth

    this.screenHeight = document.body.clientHeight

    // 监听浏览器窗口

    window.onresize = () => {

      return (() => {

        this.screenWidth = document.body.clientWidth// 窗口宽度

        this.screenHeight = document.body.clientHeight// 窗口高度

        if (this.screenWidth && this.screenHeight) {

          this.doLayout()// 调用方法

        }

        // console.log(this.screenWidth)

        // console.log(this.screenHeight)

      })()

    }

完毕