el-table列表自适应高度

组件复用mixins: [mixin],:

// tableHeight.js 
// 这种方法需要吧170 存入全局 调用的地方重新赋值
const tableHeight = {
  data() {
    return {
    tableheight:null,// 表格高度
    }
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('resize', this.getHeight);
      this.getHeight();
      this.getList();
    });
  },
  destroyed(){
    window.removeEventListener('resize', this.getHeight);
  },
  methods: {
    getHeight(e) {
      // tableHeight是el-table外层的dom的ref
      this.tableheight = window.innerHeight - this.$refs.tableHeight.offsetTop - 170// 获取浏览器高度减去顶部导航栏
      e => e.preventDefault()
    },
  },
};
export default tableHeight;

// xxx.vue 调用
import tableHeight from "@/utils/tableHeight";
export default {
  components: {},
  mixins: [tableHeight],

或者单独组件使用：

<div ref="pushrTable">
  <el-table :height="tableheight" size="mini" v-loading="listLoading" :data="listData" :header-cell-style="tableHeaderColor" border  highlight-current-row >
  </el-table>
</div>

传参调用的形式：

// 这种方法好处是可传入height 坏处是掉用的地方需要多写 
export default function(height) {
 return {
  data() {
    return {
    tableheight:null,// 表格高度
    }
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('resize', this.getHeight);
      this.getHeight();
      this.getList();
    });
  },
  destroyed(){
    window.removeEventListener('resize', this.getHeight);
  },
  methods: {
    getHeight(e) {
      this.tableheight = window.innerHeight - this.$refs.tableHeight.offsetTop - height// 获取浏览器高度减去顶部导航栏
      e => e.preventDefault()
    },
  },
 }
};

// 调用的地方 传入的height 
import TableHeight from './../tableHeight' 
let tableHeight = new TableHeight(170)
export default {
  components: {},
  mixins: [tableHeight],

  data() {
    return {
      momentId: this.$route.params.id,
      tableheight:null,// table动态高度
}},
  components: { Pagination },
  mounted() {
    this.$nextTick(() => {
      this.getList();
      window.addEventListener('resize', this.getHeight);// 开始监听
      this.getHeight()// 获取
    });
  },
  destroyed(){
    window.removeEventListener('resize', this.getHeight);// 移除监听高度
  },
  methods: {
    timeTofmt: util.timeTofmt, // 时间格式化
    getHeight(e) {
      this.tableheight = window.innerHeight - this.$refs.pushrTable.offsetTop - 170// 获取浏览器高度减去顶部导航栏
// this.$refs.pushrTable.offsetTop table到父节点的高度 
// 170是固定高度 分页器+header
      e => e.preventDefault()
    },