vue3 element plus 可编辑表格根据行列索引自动获取焦点

vue3 element plus 可编辑表格根据行列索引自动获取焦点

前言

`提示：vue3从API获取数组数据，根据后台数据，使用el-table生成表格，添加动态ref，自动获取焦点

一、效果

二、API数据格式

代码如下（示例）：

 tableHeader : [                   //table组件标题
        { prop: 'userName', label: '账号', minWidth: 120,show: true  },
        { prop: 'name', label: '用户名称', minWidth: 140,show: true  },
        { prop: 'headPortrait', label: '头像', minWidth: 60 ,show: true },
        { prop: 'phoneNumber', label: '手机号码', minWidth: 120 ,show: true },
        { prop: 'emailAddress', label: '邮箱地址', minWidth: 240 ,show: true },
        { prop: 'whetherLock', label: '性别', minWidth: 80 ,show: true },
        { prop: 'identityCard', label: '身份证号', minWidth: 165 ,show: true },
        { prop: 'birthdate', label: '最近一次登录日期', minWidth: 155 ,show: true }
                       ],
         tabledata: [                      //table数据
               {
                userName:{content: 'admin', show: true},
                name:{content: '管理员', show: true},
                headPortrait:{content: '/', show: true},
                phoneNumber:{content: '13540715564', show: true},
                emailAddress:{content: '269516578@qq.com', show: true},
                whetherLock:{content: '男', show: true},
                identityCard:{content: '510xxxxxxxxxxx1495', show: true},
                birthdate:{content: '2021-06-01', show: true},
               },
               {
                userName:{content: '2651475', show: true},
                name:{content: '张三', show: true},
                headPortrait:{content: '/', show: true},
                phoneNumber:{content: '18340715564', show: true},
                emailAddress:{content: '168512523@qq.com', show: true},
                whetherLock:{content: '女', show: true},
                identityCard:{content: '510xxxxxxxxxxx1495', show: true},
                birthdate:{content: '2023-01-01', show: true},
               },
               {
                userName:{content: 'admin', show: true},
                name:{content: '管理员', show: true},
                headPortrait:{content: '/', show: true},
                phoneNumber:{content: '13540715564', show: true},
                emailAddress:{content: '269516578@qq.com', show: true},
                whetherLock:{content: '男', show: true},
                identityCard:{content: '510xxxxxxxxxxx1496', show: true},
                birthdate:{content: '2021-06-01', show: true},
               }
                    ]

2.页面引用并绑定到组件

代码如下（示例）：

<template>
    <div>组件排版页面</div>
    <div>
        <EditTable :tableHeader="tableHeader" :tabledata="tabledata"></EditTable>
    </div>
</template>

---

3.组件实现

代码如下（示例）：

<template>
  <div class="element-table">
    <el-table ref="multipleTable" :data="this.tabledata" border stripe
    header-cell-class-name="header-cell" row-class-name='' cell-class-name="" header-row-class-name="" class-name=""
    >
    <el-table-column type="selection" align="center" width="55" />
    <el-table-column type="index" align="center" label="序号" width="60">
    </el-table-column>
    <template :key="idx" v-for="(item, idx) in this.tableHeader" >
      <el-table-column>
         <!-- 自定义表头的内容 -->
         <template #header>
      <p>
        {{item.label}} 
      </p>
    </template>
     <!-- 自定义列的内容-->
     <template #default="{row,$index}">
      <p v-show="row[item.prop].show" 

       @click=" handleEdit(row[item.prop], $index,idx)">{{row[item.prop].content}} </p>
       <el-input type="text"  v-show="!row[item.prop].show"
          v-model="row[item.prop].content"
          :ref="(el)=>setItemRef(el,$index,idx)"
          @blur="row[item.prop].show = true"
          ></el-input>
    </template>
      </el-table-column>
    </template>
  </el-table>
  <div style="margin:15px 0 0 0">
        <el-pagination
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    />
    </div>
  </div>
</template>

``setup(){
     const itemRefs = ref([]) //一维数组
    const listRefs = [[]] //二维数组
    const setItemRef = (el,row,cellindex) => {    //将dom存入数组,row列索引，cellindex行索引
        itemRefs.value.push(el)  //将ref放入数组
      }
    }
     const setItemlist=(row,indexcell)=>{  //将一维数组转化为二维数组
    .............
     }
    const print=(idx,index)=>{  //点击获取dom元素
     listRefs[idx][index].focus()
    }
    return {
      setItemRef,
      print
    }
  },`
 methods:{
    // cell 单元格中的显示内容和显示状态,idx 列索引,index行索引
        handleEdit(cell,idx,index)
        {
          cell.show= false
          this.print(idx,index)
        }
  },
# 总结
在网上找了很多资料很多不全，ref获取dom遇到很多问题，最全的使用js原生写法，先获取<p>在根据兄弟节点一路找下去，因为一些特别的原因我需要根据行列索引直接使用焦点和更改，今天把代码贴出来，做个简单的记录。`