vue3 和 element-plus 实现指定单元格编辑

最新推荐文章于 2025-03-10 09:42:30 发布

嘤嘤嘤小主

最新推荐文章于 2025-03-10 09:42:30 发布

阅读量2.3k

点赞数 4

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_45600052/article/details/132012124

版权

文章描述了如何在Vue.js应用中实现el-table组件的单元格编辑功能。通过定义变量控制行和列，监听单元格点击事件获取位置信息，动态显示输入框，并在输入框失去焦点或按回车键时更新数据并隐藏编辑状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：

1. 获取到指定单元格的位置 2. 通过状态来判断是否展示编辑

步骤：

1. 定义一个变量去确定行和列

let tableRowEditId = ref(null), // 控制可编辑的每一行
let tableColumnEditIndex = ref(null), //控制可编辑的每一列

2. 在el-table 上绑定单元格的点击事件 cell-click(单击) cell-dblclick(双击) 在该事件上可以解构出是 row 和 column 确定点击的单元格的位置

 <el-table
   :data="tableData"
   style="width: 100%"
   border
   @cell-click="showUnitInput"
  >

</el-table>


const showUnitInput = (row: any, column: any) => {
  // console.log('row', row)
  // console.log('column', column)
  //赋值给定义的变量
  tableRowEditId.value = row.id //确定点击的单元格在哪行 如果数据中有ID可以用ID判断，没有可以使用其他值判断，只要能确定是哪一行即可
  tableColumnEditIndex.value = column.id //确定点击的单元格在哪列 
}

3. 在指定的单元格上点击显示输入框(编辑) input是放在的el-table-item的插槽中，可以解构出 row和 column 确定输入框的位置

4. 然后通过这两个值去比较进行显示隐藏

5. 当输入框失去焦点或者触发了键盘的回车键，将判断条件的值清空即可

<el-table-column
  prop="xxxxx"
  label="xxxxx"
  >
   // 判断input框所在的单元格的位置是否和赋值的变量的值一致，一致就显示 否则显示其他的
   //@blur @keyup.enter 失去焦点事件和 键盘按下回车事件
  <template #default="{ row, column }">
   <el-input
    v-if="
     tableRowEditId === row.id &&
     tableColumnEditIndex === column.id
    "
    @blur="blurValueInput(row, column)"
    @keyup.enter="blurValueInput(row, column)"
   />
     <span v-else>{{ row.value }}</span>
   </template>
 </el-table-column>


const blurUnitInput = (row: { [x: string]: boolean }, column: any) => {
  tableRowEditId.value = null
  tableColumnEditIndex.value = null
  //在此处调接口传数据
}