element ui表格设置动态高度

要在Element UI表格中设置动态高度，您可以使用以下步骤：

1. 在表格外部的容器元素上设置合适的高度样式，例如：

<div style="height: 300px;">
  <el-table :data="tableData">
    <!-- 表格内容 -->
  </el-table>
</div>

这样，包含表格的容器元素将具有固定的高度。

2. 如果您希望表格高度随内容自动调整，可以使用`max-height`属性来设置最大高度，并将其值设置为`100%`，例如：

<div style="max-height: 100%;">
  <el-table :data="tableData">
    <!-- 表格内容 -->
  </el-table>
</div>

这样，表格的高度将根据内容自动调整，并且不会超过容器元素的高度。

3. 如果您希望表格能够滚动显示，并在超出容器高度时出现滚动条，您可以结合使用`max-height`和`overflow`属性，例如：

<div style="max-height: 300px; overflow: auto;">
  <el-table :data="tableData">
    <!-- 表格内容 -->
  </el-table>
</div>

这样，当表格内容超过容器高度时，容器将出现滚动条，并且您可以通过滚动来查看所有的表格数据。

根据您的需求和具体情况，选择适合的方法来设置表格的动态高度。记得根据实际情况调整容器元素的高度或最大高度值。

相关问题

element ui如何设置表格的高度

在 Element UI 中，你可以使用 `height` 属性来设置表格的高度。

例如，你可以将表格的高度设置为 `400px`，代码如下：

<template>
  <el-table :data="tableData" height="400">
    <!-- 表格列内容 -->
  </el-table>
</template>

你也可以将高度设置为一个百分比，例如：

<template>
  <el-table :data="tableData" height="80%">
    <!-- 表格列内容 -->
  </el-table>
</template>

除了在模板中直接设置，你也可以在 JavaScript 代码中动态设置高度，例如：

<template>
  <el-table :data="tableData" :height="tableHeight">
    <!-- 表格列内容 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableHeight: 0, // 初始高度为0
      // ...
    }
  },
  mounted() {
    this.tableHeight = document.documentElement.clientHeight - 200 // 动态计算高度
  }
}
</script>

在上面的例子中，我们在 `mounted` 钩子函数中动态计算表格高度，并将值赋给 `tableHeight`。这样，在模板中使用 `:height="tableHeight"` 就可以动态设置表格高度了。

element ui表格设置border属性后拖动行，内容依旧是显示省略号

这个问题可能是由于表格的行高不够导致的。当表格的行高不够时，即使设置了`border`属性，内容也会被省略号代替。解决这个问题的方法是增加表格行的高度。

你可以在表格的样式中添加以下代码：

.el-table tr {
  height: 40px;
}

这样设置后，表格行的高度就会增加到40px，就不会出现内容省略号的问题了。你可以根据实际情况调整行高的数值。