el-table input textarea 文本域 自适应高度,切换分页滚动失效处理办法

场景: el-table 表格 需要 input类型是 textarea 高度是自适应,第一页数据都是单行数据 不会产生滚动条,但是第二页数据是多行数据 会产生滚动条,

bug: 第一页切换到第二页 第二页滚动条无法展示

解决办法:直接修改样式 加上overflow-y:auto 样式 完美解决

javascript 复制代码
this.$nextTick(() => {
	const table = this.$refs.tableRef.$el;
	const bodyWrapper = table.querySelector(".el-table__body-wrapper");
	if (bodyWrapper) {
		// 直接修改内联样式
	    bodyWrapper.style.overflowY = "auto";
	}
});

或者直接使用css

css 复制代码
::v-deep .el-table__body-wrapper {
	overflow-y: auto ;
}
相关推荐
Quke陆吾1 小时前
Vue框架1(vue搭建方式1,vue指令,vue实例生命周期)
前端·javascript·vue.js
苹果酱05671 小时前
Java设计模式:探索编程背后的哲学
java·vue.js·spring boot·mysql·课程设计
Oscar_02082 小时前
uniapp+ts 多环境编译
前端·vue.js·typescript·uni-app
EndingCoder2 小时前
从零基础到最佳实践:Vue.js 系列(9/10):《单元测试与端到端测试》
前端·javascript·vue.js·性能优化·单元测试·vue3
How_doyou_do2 小时前
Vue-创建应用/挂载应用/根组件模版-.vue单文件/应用配置
前端·javascript·vue.js
王者鳜錸3 小时前
Vue3集成Element Plus完整指南:从安装到主题定制下-实现后台管理系统框架搭建
前端·javascript·vue.js
EndingCoder3 小时前
React从基础入门到高级实战:React 基础入门 - 简介与开发环境搭建
前端·javascript·react.js·前端框架
Stringzhua3 小时前
初识Vue【1】
javascript·vue.js·ecmascript
zhutoutoutousan4 小时前
解决 Supabase “permission denied for table XXX“ 错误
javascript·数据库·oracle·个人开发
小镇学者5 小时前
【JS】Vue 3中ref与reactive的核心区别及使用场景
前端·javascript·vue.js