eltable固定列踩坑之旅

你不会困
251 阅读3分钟

前言

大家好，我是你不会困，写代码就不会困，今天分享的是eltable固定列踩坑之旅

有一个需求就是在el-table上进行编辑，点击填写按钮之后出现el-input，然后进行聚焦，一开始就想着简单，应该花不了很长时间，然而太过于自信了，卡了两个小时

image.png

看代码，不就是很简单嘛，给el-input加上ref，然后在点击填写按钮通过this.$refs.estimatedInsurancePayoutAmount.focus()

<el-input v-if="showEdit[$index]?.estimatedInsurancePayoutAmount"
                    ref="estimatedInsurancePayoutAmount"
                    v-model.number="row.estimatedInsurancePayoutAmount"
                    placeholder=""
                    style="width: 80px"
                    class="lrInput"
                    @focus="focusEvent(row, $index)"
                    @blur="blurEvent(row, $index, 7)"
                  ></el-input>
                  
 this.$refs.estimatedInsurancePayoutAmount.focus()

然后回到网页进行点击填写按钮，咦，怎么可以输入，但是没有高亮的样式

这个时候就有两个方案：

1.添加focus的样式 2.this.$nextTick

那就开始吧 1.加了样式还是没有，样式穿透/deep/，还是没有效果，显然方案1失败了 2.那就方案2，还是没有效果，肯定还有一些小问题

this.$nextTick(() => {
    this.$refs.estimatedInsurancePayoutAmount.focus()
})

想了一下，会不会是这个时候v-if，dom还没生成，尝试网上其他人的做法，使用setTimeout，还是无效

this.$nextTick(() => {

        setTimeout(() => {

         this.$refs.estimatedInsurancePayoutAmount.focus()

        }, 0)

      })

在过度自信地尝试解决问题时，我自然而然地转向了百度和Google，寻找类似的问题及其解决方案。然而，大多数信息虽然提供了方向，却并未直接击中问题的核心。于是，我决定采取最基础的方法，即逐一排查与测试，以定位问题的根源。

首先，我利用el-input和el-button组件构建了一个简单的点击测试，通过v-if指令观察焦点（focus）效果的变化。这一过程中，我注意到一个现象：当尝试改变输入框的值时，我深刻体会到了Vue双向数据绑定的强大与微妙之处。但随之而来的问题是，无论是点击输入框内部还是外部，焦点都会意外消失，这明显不符合预期。

进一步回溯与思考后，我意识到问题可能与el-table组件的特定行为有关。特别是，由于我的表格包含固定列，点击操作可能会意外地触发了表格中其他input元素的焦点获取。这一发现揭示了问题的真相：焦点被错误地引导到了表格前面的第一个input上，从而导致了虽然可以输入，但焦点却立即丢失的奇异现象。

为了解决这个问题，我开始探索可能的优化方案。首先，考虑调整el-table的配置，特别是与固定列相关的设置，看是否能阻止这种非预期的焦点转移。同时，我也会考虑使用JavaScript或Vue的API来更精细地控制焦点的行为，确保用户体验的连贯性和稳定性。通过这些努力，我相信能够找到一个既有效又优雅的解决方案。

那么，怎么解决呢~

<el-input v-if="showEdit[$index]?.estimatedInsurancePayoutAmount"
 :id="'input-' + $index"
 ref="estimatedInsurancePayoutAmount"
 v-model.number="row.estimatedInsurancePayoutAmount"
 placeholder=""
 style="width: 80px"
 class="lrInput"
 @focus="focusEvent(row, $index)"
 @blur="blurEvent(row, $index, 7)"
 ></el-input>
 
 this.$nextTick(() => {
        setTimeout(() => {
          document.getElementById(`input-${index}`).focus()
        }, 0)
      })

方法也是很简单：就是给el-input添加一个唯一的id，通过document.getElementById去获取就不会定位到el-table的固定列的el-input

总结：

1.了解到el-table的固定列的做法才可以知道问题出现在哪里，这里是通过多个表格，所以el-input就不止一个，没法精确到指定的el-input 2.使用唯一的id，然后document.getElementById精确定位到el-input上进行focus

avatar
文章
阅读
粉丝