在有限高度容器内使 动态输入框自动滚动到视野内
问题场景
如下动图所示,一个容器高度只能显示3行数据,而此容器内的数据又是动态添加的,每次新增一行不会自动滚动到下方单元格内,需要用户自己滚动下去再填写内容,用户体验非常不友好(结合客户想法,设计如此)
代码(有3种方案)
- 一般这种都是列表渲染出来的,新增一行就是给列表加一个元素(因为输入框绑定了 v-if v-else 就不用 ref 了,直接用 js 获取 dom 来给 dom 赋予焦点,然后就会自动滚动过去啦)
- 关键点:动态 id、dom.focus() 聚焦
/* 关键代码
<el-table max-height="135" :data="projectInfo.sgStageTargetListVO" border :show-header="false">
...
<el-table-column align="left">
<template slot-scope="scope">
<span v-if="scope.row.status==3>{{scope.row.targetcontent}}</span>
<el-input :id="'stageNode' + scope.$index" v-else v-model="scope.row.targetcontent" type="textarea" :autosize="{ minRows: 1, maxRows: 3}" placeholder="请输入目标计划名称" />
</template>
</el-table-column>
...
<div class="table-actions" v-if="(statusShow=='待提交'||projectInfo.step==0||statusShow=='已退回')&&planDetail" @click="addPlan()">
<el-button type="text" icon="el-icon-plus">新增目标计划</el-button>
</div>
...
*/
// 新增目标计划
addPlan () {
this.planDetail = true
let item = {
id: '',
targetcontent: '',
}
this.projectInfo.sgStageTargetListVO.push(item)
this.$nextTick(() => {
// 写法1【推荐】
let inputId = "stageNode" + (this.projectInfo.sgStageTargetListVO.length - 1)
document.getElementById(inputId).focus()
// 写法2(没有自动聚焦效果)
// document.querySelector(".poa .card-box .el-table table > tbody > tr:nth-last-child(1)").scrollIntoView({ block: "nearest", inline: "nearest" })
// 写法3(没有自动聚焦效果)
// 配套(表格需要设置 ref)
// <el-table :ref="'weekTable'+index" height="135" :data="item.sgStagePlanDetailInfoVOS" border :show-header="false">
this.$refs[`weekTable${index}`][0].bodyWrapper.scrollTop = this.$refs[`weekTable${index}`][0].bodyWrapper.scrollHeight;
})
},
扩展
Element.scrollIntoView() | MDN
- 也能达到上述效果,区别就是没有聚焦效果(聚焦对象比较复杂,暂且统一滚动到视野内)
- 具体细节可以看看文档(对齐方向几个值可以试试有没有什么用
"start"
,"center"
,"end"
, 或"nearest"
) - tips:
document.querySelector()
只会返回匹配到的第一个 dom 元素
document.querySelector("....").scrollIntoView({block: "nearest", inline: "nearest"})
// behavior smooth 似乎没有效果,可能还需要其他处理
-
- 用 css 实现平滑滚动