Vue开发学习笔记:Vue3中使用标签的ref属性设置el-table点击单元格自动获取焦点

<el-table
        :data="tableData"
        @select="handleRowSelect"
        @cell-click="handleCellClick"
        :cell-style="{padding: '0.5'}"
        border
        stripe
        fit
        empty-text="未查询到数据" >
          <el-table-column fixed  prop="selected" type="selection"/>
          <el-table-column header-align="center" v-for="(colInfo,index) in tableColInfo"
          :fixed="colInfo.isFixed"
          :key="index"
          :prop="colInfo.colName"
          :label="colInfo.colCname"
          :width="getColWidth(colInfo.colName,colInfo.colCname)" >
            <!-- 自定义表项/单元格内容 -->
            <template #default="scope">
              <!-- 双击文字或点击修改图标以更改"show"属性 -->
              <!-- scope.row为元数据-->
              <span v-show="!scope.row[colInfo.colName+'showEditInput']" @handleCellClick="handleCellClick">
                {{scope.row[colInfo.colName]}}
              </span>
              <!-- 失去焦点时更改"show"属性，显示文本 -->
              <el-input
                v-show="scope.row[colInfo.colName+'showEditInput']"
                v-model="scope.row[colInfo.colName]"
                :ref = "setRefFocus"
                :id = "scope.column.property+scope.$index"
                @blur="handleLosFocus(scope.row,scope.column)"
              />
            </template>
          </el-table-column>
        </el-table>

export default {
  name: 'FormSM01',
  setup (props, context) {
    const inputFormCode = ref('')
    const inputColName = ref('')
    const inputColCname = ref('')
    const tableData = ref([])
    const showEditInput = ref(true)
    let isFirstClick = true

    // 关键代码
    const setRefFocus = (el) => {
      if (el.ref !== undefined) {
        el.ref.focus()
      }
    }
    const tableColInfo = [
      { colName: 'FORM_CODE', colCname: '功能号', dataType: ' ', isFixed: true },
      { colName: 'FIELD_NAME', colCname: '列名', dataType: ' ', isFixed: true },
      { colName: 'FIELD_TITLE', colCname: '列标题', dataType: ' ', isFixed: true },
      { colName: 'COL_DISPLAY_INDEX', colCname: '列显示顺序', dataType: ' ', isFixed: false },
      { colName: 'COL_SELECTABLE', colCname: '是否选择列', dataType: ' ', isFixed: false },
      { colName: 'COL_HIDDEN', colCname: '列是否隐藏', dataType: ' ', isFixed: false },
      { colName: 'COL_EDITABLE', colCname: '列是否可编辑', dataType: ' ', isFixed: false },
      { colName: 'COL_FIXED', colCname: '列是否固定', dataType: ' ', isFixed: false },
      { colName: 'COL_FORMAT', colCname: '列格式掩码', dataType: ' ', isFixed: false },
      { colName: 'COL_WIDTH', colCname: '列宽度', dataType: ' ', isFixed: false },
      { colName: 'BACK1', colCname: '备注1', dataType: ' ', isFixed: false },
      { colName: 'BACK2', colCname: '备注2', dataType: ' ', isFixed: false },
      { colName: 'BACK3', colCname: '备注3', dataType: ' ', isFixed: false },
      { colName: 'BACK4', colCname: '备注4', dataType: ' ', isFixed: false },
      { colName: 'BACK5', colCname: '备注5', dataType: ' ', isFixed: false }
    ]

    return {
      setItemRef
    }
  }
}