vue 获取el-table的高度

可以通过 $refs 获取 el-table 的 DOM 元素，然后使用 offsetHeight 属性获取高度。示例代码如下：

<template>
  <el-table ref="table"></el-table>
</template>

<script>
export default {
  mounted() {
    const tableHeight = this.$refs.table.$el.offsetHeight;
    console.log(tableHeight);
  }
}
</script>

相关问题

vue2 el-table 设置高度自适应

要设置`el-table`的高度自适应，可以使用`max-height`属性，将其设置为页面可用区域的高度，这样表格就会自动占据可用区域的高度，并且在数据过多时会自动出现滚动条。以下是一个示例代码：

<template>
  <div class="table-container">
    <el-table :data="tableData" style="width: 100%" :max-height="tableHeight">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, address: '北京市朝阳区' },
        { name: '李四', age: 25, address: '上海市浦东新区' },
        { name: '王五', age: 30, address: '广州市天河区' },
        { name: '赵六', age: 35, address: '深圳市南山区' },
        { name: '钱七', age: 40, address: '武汉市江汉区' }
      ],
      tableHeight: 0
    }
  },
  mounted() {
    this.tableHeight = document.documentElement.clientHeight - this.$el.getBoundingClientRect().top - 30
  }
}
</script>

<style scoped>
.table-container {
  margin: 20px;
}
</style>

在这个示例代码中，我们首先在`data`中定义了一个`tableHeight`属性，并将其初始化为0。在`mounted`生命周期钩子中，我们使用`document.documentElement.clientHeight`获取当前页面可用区域的高度，然后减去表格容器元素距离页面顶部的距离和一些额外的边距，得到表格的最大高度，将其赋值给`tableHeight`属性。然后，在`el-table`组件中，我们将`max-height`属性设置为`tableHeight`，这样表格就会自动适应可用区域的高度。

vue3 el-table序号

在Vue3的el-table中展示序号可以使用`index`属性。具体方法如下：

<template>
  <el-table :data="tableData">
    <el-table-column type="index" label="序号"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
        { name: '王五', age: 22 }
      ]
    }
  }
}
</script>

在el-table-column中设置`type="index"`即可展示序号，同时可以设置`label`属性来自定义序号列的表头名称。