<el-table :data="tableData" style="width: 100%" max-height="50">超出最大高度后看不见了怎么办
时间: 2023-07-06 09:35:08 浏览: 64
你可以将 `max-height` 属性的值设置为一个较大的值,然后在外部包裹一个具有固定高度的容器,并将其样式设置为 `overflow-y: auto`,这样就可以实现滚动条的效果,保证表格可以在容器内正常显示。示例代码如下:
```html
<div style="height: 50px; overflow-y: auto;">
<el-table :data="tableData" style="width: 100%">
<!-- 表格内容 -->
</el-table>
</div>
```
其中,`height` 属性可以根据实际情况进行调整。
相关问题
<el-table border :data="infoDataList" max-height="300" :row-class-name="tableRowClassName">不使用插件,如何使只加载可视部分
好的,你的问题是如何不使用插件实现只加载可视部分的`<el-table>`表格。在Vue.js中,你可以使用`v-show`指令和计算属性来实现这一功能。以下是实现方法:
1. 在你的Vue.js组件中,定义一个计算属性来计算当前可见的行数。例如:
```javascript
computed: {
visibleRowCount() {
const table = this.$refs['my-table'].$el.querySelector('.el-table__body-wrapper');
const rowHeight = 40; // 每行的高度
const visibleHeight = table.clientHeight; // 可见区域的高度
return Math.ceil(visibleHeight / rowHeight);
}
}
```
这个计算属性会计算可见区域内的行数,假设每行高度为40像素。
2. 使用`v-show`指令来控制每行的可见性。例如:
```html
<template>
<el-table ref="my-table" border max-height="300" :row-class-name="tableRowClassName">
<el-table-column
v-for="(column, index) in columns"
:key="index"
:prop="column.prop"
:label="column.label"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100"
>
<template slot-scope="scope">
<el-button type="text" size="small">编辑</el-button>
<el-button type="text" size="small">删除</el-button>
</template>
</el-table-column>
<el-table-body>
<el-table-row
v-for="(row, index) in infoDataList"
:key="index"
v-show="index >= startIndex && index < endIndex"
>
<el-table-column
v-for="(column, index) in columns"
:key="index"
:prop="column.prop"
>
{{ row[column.prop] }}
</el-table-column>
</el-table-row>
</el-table-body>
</el-table>
</template>
```
在上面的代码中,我们使用`v-show`指令来控制每行的可见性。`startIndex`和`endIndex`是计算属性`visibleRowCount`计算出的可见行的起始和结束索引。只有在这个范围内的行才会被渲染和显示。
通过这种方式,`<el-table>`表格将只渲染可见的部分,同时保持高性能。希望这个方法对你有所帮助!
<el-table :max-height="tableHeight" :data="dataPage.list" fit stripe style="width: 100%" :size="$store.getters.size" @sort-change="sortHandler" @selection-change="handleSelectionChange"> <template v-for="(item, index) in tableColumns"> <el-table-column v-if="item.show" :key="index" :fixed="item.fixed" :show-overflow-tooltip="true" :min-width="item.minWidth" :width="item.width" :prop="item.prop" :sortable="item.sortable" :label="item.label" :formatter="item.render" /> </template> </el-table>解释一下
这是一个使用了 Element UI 组件库中的 el-table 组件的代码片段。el-table 是一个基于 Vue.js 的可排序、可筛选、可分页的表格组件。在这段代码中,通过 :max-height 绑定了表格的最大高度,通过 :data 绑定了表格的数据源,通过 :size 绑定了表格的尺寸(大小),通过 @sort-change 绑定了表格排序的事件处理函数sortHandler,通过 @selection-change 绑定了表格选择的事件处理函数handleSelectionChange。
在模板中,通过 v-for 循环遍历了一个名为 tableColumns 的数组,数组中的每个元素代表了表格的每一列,通过 v-if 判断是否需要显示该列,通过 el-table-column 组件来定义每一列的样式、属性和内容。其中,:key 绑定了每个列的唯一标识符,:fixed 绑定了列是否固定,:min-width 和 :width 绑定了列的最小宽度和宽度,:prop 绑定了列所对应的数据源中的属性,:sortable 绑定了列是否可排序,:label 绑定了列的标题,:formatter 绑定了列的渲染函数。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)