el-table 自适应

响应式布局的实现方法是什么？

回答：el-table支持自适应响应式布局，只需要在 table 的外层包裹一层 el-scrollbar，然后设置 height 或 maxHeight 属性即可。同时也可以通过设置 el-table 的 min-height 或者 max-height 属性来进行高度限制。

相关问题

el-table自适应高度

要实现el-table的自适应高度，可以按照以下步骤进行操作：
1. 在el-table中动态绑定一个高度，并在data中声明tableHeight。

<el-table ref="multipleTable" :data="tablist" style="width: 100%" v-if="tableHeight" :height="tableHeight"></el-table>

data() {
  return {
    tableHeight: "",//表格高度
  }
}

2. 声明一个方法来计算el-table的高度。

methods: {
  //计算table高度(动态设置table高度)
  getTableHeight() {
    let tableH = 210; //距离页面下方的高度
    let tableHeightDetil = window.innerHeight - tableH;
    if (tableHeightDetil <= 300) {
      this.tableHeight = 300;
    } else {
      this.tableHeight = window.innerHeight - tableH;
    }
  },
}

3. 在mounted钩子函数中，通过计算窗口高度、表格距离顶部距离和需求高度来设置tableHeight，并更新表格防止内容变化引起异常情况。同时，监听窗口大小变化，实时更新tableHeight。

mounted() {
  let that = this;
  this.$nextTick(() => {
    this.tableHeight = window.innerHeight - this.$refs.table_e.$el.offsetTop - 200; //窗口高度-表格距离顶部距离-需求高度
    this.$refs.table_e.doLayout(); //更新表格防止表格内容变化表格异常情况
    //监听窗口大小变化
    window.onresize = function() {
      that.tableHeight = window.innerHeight - that.$refs.table_e.$el.offsetTop - 200;
      that.$refs.table_e.doLayout();
    };
  });
},

以上就是实现el-table自适应高度的方法。

vue el-table自适应屏幕

以下是VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法：

<template>
  <div class="table-container">
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-style="{height: '50px'}"
      :header-row-style="{height: '50px'}"
      :fit="false"
      :height="tableHeight"
      ref="table"
    >
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址" width="180"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2021-01-01',
          name: '张三',
          address: '北京市朝阳区'
        },
        {
          date: '2021-01-02',
          name: '李四',
          address: '上海市浦东新区'
        },
        {
          date: '2021-01-03',
          name: '王五',
          address: '广州市天河区'
        }
      ],
      tableHeight: 0
    }
  },
  mounted() {
    this.getTableHeight()
    window.addEventListener('resize', this.getTableHeight)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.getTableHeight)
  },
  methods: {
    getTableHeight() {
      const tableHeight = document.documentElement.clientHeight - this.$refs.table.$el.offsetTop - 50
      this.tableHeight = tableHeight
    }
  }
}
</script>

<style>
.table-container {
  height: 100%;
  overflow: auto;
}
</style>

在这个例子中，我们使用了ElementUI的el-table组件，并且设置了表格的高度为tableHeight。在mounted钩子函数中，我们调用了getTableHeight方法来获取表格的高度。在getTableHeight方法中，我们使用了document.documentElement.clientHeight来获取浏览器窗口的高度，然后减去表格距离浏览器窗口顶部的距离和表头的高度，得到表格的高度。最后，我们将计算出来的表格高度赋值给tableHeight即可。