關於使用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>