关于使用element-ui中遇到的问题

1.表格错位问题

this.$nextTick(() => {

          this.$refs.table.doLayout()

        })

@1使用element表格的方法doLayout()重新布局,在请求数据之后加入代码this.$refs.tableData.doLayout()，这方法不一定有效，也有可能是我代码哪写的有问题导致没起效，但是每个表格添加这个方法总是繁琐的。

@2

 

 

*****************************************************************************************

*****************************************************************************************
*****************************************************************************************
*****************************************************************************************
*****************************************************************************************

<template>
  	<Pagination :current-page.sync="currentPage" :page-sizes="pageSizeArr" 
  			  	:page-size="pageSize" :total="totalSize"
              	@size-change="onSizeChangeHandler" 
              	@current-change="onCurrentChangeHandler"
              	layout="total, sizes, prev, pager, next, jumper"
              	background />
</template>

<script>
import { Pagination } from 'element-ui'

export default {
  name: 'table-pagination',
  components: { Pagination },
  data() {

    return {
      currentPage: 1,
      pageSize: 10,
      pageSizeArr: [10, 20, 50, 100],
      totalSize: 0
    }
  },

  props: {
  // 从后台获取到的所有表格数据tableData
    data: {
      default: function() {
        return []
      },
      type: Array
    }
  },

  watch: {
    data(newData) {
      this.totalSize = newData.length
      this.onCurrentChangeHandler(1)
    }
  },

  methods: {
	// currentPage 改变时会触发
    onCurrentChangeHandler(pageIndex) {

      this.$emit('onTableChange', this.sliceRightData(pageIndex))
    },

	// 分页逻辑
    sliceRightData(pageIndex) {
      let data = this.data

      if(_.isEmpty(data)) {

        return []
      }else{

        return data.slice((pageIndex - 1) * this.pageSize, pageIndex * this.pageSize)
      }
    },

	// pageSize 改变时会触发：
    onSizeChangeHandler(val) {
      this.pageSize = val
      this.currentPage = 1
      this.onCurrentChangeHandler(1)

    }
  }
}
</script>

　　

 

<template>
  	<Table :data="currentPageData" :header="tableHeader" />
    <Pagination :data="tableData" @onTableChange="onTableChange" />
</template>

<script>
import Table from '@/components/table'
import Pagination from '@/components/table-pagination'

export default {
  name: 'table-pagination',
  components: {
    Table,
    Pagination
  },
  data() {

    return {
      // 从后台获取到的全部数据	
      tableData: [],
      // 当前页数据
      currentPageData: [],
      //表头数据
      tableHeader: this.getTableHeader()
    }
  },

  methods: {
    onTableChange(pageData) {
      this.currentPageData = pageData
    }
  }
}
</script>