vueelement表格怎么 实现 滑动滚轮时 表格呈现 自适应状态
时间: 2023-11-25 10:04:17 浏览: 45
要实现滚轮滑动时表格呈现自适应状态,可以使用element-ui中的el-table组件。可以在el-table组件中设置max-height属性来控制表格的最大高度,当表格内容超出最大高度时,表格会自动显示滚动条。同时,可以在el-table-column组件中设置min-width属性来控制列的最小宽度,当列宽小于最小宽度时,列会自动显示省略号。
以下是一个示例代码:
```
<template>
<div>
<el-table
:data="tableData"
:max-height="tableHeight"
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
:min-width="100">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
:min-width="80">
</el-table-column>
<el-table-column
prop="address"
label="地址"
:min-width="200">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{name: '张三', age: 18, address: '北京市朝阳区'},
{name: '李四', age: 20, address: '上海市浦东新区'},
{name: '王五', age: 22, address: '广州市天河区'},
{name: '赵六', age: 24, address: '深圳市福田区'},
{name: '孙七', age: 26, address: '成都市锦江区'},
{name: '周八', age: 28, address: '武汉市江汉区'},
{name: '吴九', age: 30, address: '南京市鼓楼区'},
{name: '郑十', age: 32, address: '杭州市西湖区'},
],
tableHeight: 0
}
},
mounted() {
this.tableHeight = window.innerHeight - this.$el.offsetTop - 20
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
},
methods: {
handleResize() {
this.tableHeight = window.innerHeight - this.$el.offsetTop - 20
}
}
}
</script>
```
在上面的示例代码中,我们设置了一个tableHeight变量来控制表格的高度,然后在mounted钩子函数中计算表格的高度,当窗口大小改变时,通过监听resize事件来重新计算表格的高度。通过这种方式,我们可以实现滚轮滑动时表格呈现自适应状态。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)