解决表格中动态el-input（focus、blur异常）（涉及vue、document以及原生div属性操作）

一、异常来源

最初，本来需求，就简单的在表格的输入框失去聚焦的时候（或值改变的时候）进行规范校验，然后根据校验对其进行聚焦focus()事件（并给出message提示）。
结果却发现如此坑爹之处:

二、解决思路与步骤

1. 用vue获取ref,进行focus，没啥用

2. 用document,因为是table组件中的input，使它，聚焦的时候是整列，使其在tab（键盘tab）操作时，会去下一行同列

3. 给每个el-input动态设置id，然鹅，发现聚焦实在element封装的最外层div元素上

4. 然后通过contenteditable="true"使，div可以设置值，并可以操作focus，但是有缺陷，会使div和input在聚焦时，是不同的两层框（div凸显的黑色边框）

5. 最终，想还是聚焦在原生元素

可以看到element这个封装有点多，id="columnLen1"是动态的id

<div data-v-2838d642="" class="el-form-item el-form-item--small my-form-item" contenteditable="false" id="columnLen1">

<div class="el-form-item__content">
<div class="el-input el-input--small my-input">

<input type="text" autocomplete="off" size="small" class="el-input__inner">

div>
div>div>

那都到这里了，该怎么聚焦到这个没法设置id，且class并不是独一无二的元素上呢？？？

• 最终还是让我找到了！！！
  直接看代码：
  1、先获取element，el-input，最外面的div（带动态id的），然后再找其下唯一的input元素，对其进行聚焦
  document.getElementById('columnLen' + row.sort).querySelectorAll('input')[0].focus()

• 到这里，就得看看基础的querySelectorAll()了：
• 通过 CSS 选择器查找 HTML 元素
  如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法。
  querySelectorAll() 不适用于 Internet Explorer 8 及其更早版本。