Vue的组件table中遍历my-input组件（绑定row数据）进行根据id对div进行focus

一、Vue的ref进行focus

无效，同列遍历出来的input依然可以跳转

二、根据div元素的id进行focus

无效，div本身无法聚焦

三、使div元素可聚焦

1.1、div中的tabindex属性

tabindex只能用数字
所以这样无效

这个当了浏览器就是个以div包裹的了
<my-input
:tabindex="'columnLen'+ row.sort" 
        :id="'columnLen'+ row.sort"
        v-model="row.length"
        size="small"
        @blur="handleBlur(row)"
      ></my-input>

直接用sort（自定的索引）遍历，在blur事件中会在同列竖排中的input在按tab键时根据tabindex（tab的索引的大小）跳转

<my-input
:tabindex="row.sort" 
        :id="'columnLen'+ row.sort"
        v-model="row.length"
        size="small"
        @blur="handleBlur(row)"
      ></my-input>

所以focus事件没有起作用

1.2、html5中div的属性contenteditable

• contenteditable="true"后div元素可以代替input进行文本编辑

所以这里在blur事件后根据条件成功聚焦（效果会有一个带样式的框框包住这个div元素）

<my-input
        contenteditable="true"
        :id="'columnLen'+ row.sort"
        v-model="row.length"
        size="small"
        @blur="handleBlur(row)"
      ></my-input>