简介

操作 element-ui 的 el-table 时，想要快速tab切换光标到指定的列的输入框中，而不是把一行有聚焦的都tab切换选中一遍（如有el-button时，按tab切换也会切换到它上面去）。
并且鼠标单击输入框时，自动全选内容。

要用到的功能点：

1.自定义单元列的内容：

由于本功能需要行的索引，所以使用了slot-scope="scope"

// 1. slot-scope="scope"  （此处scope是表格的行属性）
<template slot-scope="scope"></template>

// 2.  #default="{row}"  （此处row类似scope.row）
<template #default="{row}"></template>

2.获取行的数据：scope.row.属性

<template slot-scope="scope">{
  {scope.row.id}}</template>

3.获取单元行的索引：scope.$index

<template slot-scope="scope">{
  {scope.$index}}</template>

具体实现

<template>
  <div class="object-type-data-list-box">
    <div class="object-type-data-list-table">
      <el-table :data="tableData" height="100%" border stripe>
        <el-table-column prop="url" label="缩略图" width="125">
          <template slot-scope="scope">
            <el-image class="table-row-image" :lazy="true" :src="scope.row.url" fit="contain"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="code" width="100"> </el-table-column>
        <el-table-column prop="title0" label="中文">
          <template slot-scope="scope">
            <input
              :ref="'table' + scope.$index + 'title0'"
              v-model="scope.row.title0"
              type="text"
              maxlength="300"
              @keydown="tableRowInputKeyup($event, scope.$index, 'title0')"
              @focus="selectTableRowInputFun('table' + scope.$index + 'title0')"
            />
          <