在有限高度容器内使 动态输入框自动滚动到视野内

在有限高度容器内使 动态输入框自动滚动到视野内

问题场景

如下动图所示，一个容器高度只能显示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 似乎没有效果，可能还需要其他处理

• element ui table scrollTop 滚动到行头或行尾

• scroll-behavior

  • 用 css 实现平滑滚动