单元格内实现可编辑并保存，并实现精准定位到当前点击的单元格？

          
            
              
              {{ row[item.prop] }}
            
          
        

// 遍历出所有表格行的回调函数
    tableRowClassName({ row, rowIndex }) {
      row.row_index = rowIndex;
    },
    // 双击事件触发的函数
    cellDblclick(row, column, cell, event) {
      console.log(event.bubbles);
      // if(row.row_index)
      this.cellDoubleClice = event.bubbles;
    },

为了实现单元格内的可编辑并保存，并且能够精准定位到当前点击的单元格，你可以按照以下步骤进行操作：

1. 在双击事件cellDblclick中，添加逻辑以设置cellDoubleClice为true，表示该单元格处于可编辑状态。
2. 在表格列定义中，使用slot-scope来获取每个单元格的数据和属性。
3. 根据cellDoubleClice的值决定是显示el-input还是span元素。
4. 当cellDoubleClice为true时，el-input会显示，使用v-model来实现表格数据的双向绑定，确保编辑的内容能够被保存。
5. 当cellDoubleClice为false时，span元素会显示，用于展示不可编辑的单元格数据。
6. 为了实现精准定位到当前点击的单元格，你可以在服务器托管网tableRowClassName中给每行数据添加一个row_index属性，记录行索引。
7. 在双击事件cellDblclick中，通过rowIndex参数获取当前点击的行索引，你可以在此处添加自己的定位逻辑，比如滚动到指定的行或高亮当前行。

请注意以上代码片服务器托管网段中可能存在一些拼写错误或不完整的代码，你需要根据实际情况进行调整和完善。另外，这只是一个示例，你可能需要根据自己的具体需求进行修改和扩展。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: Element-ui Form 表单

Element-ui Form 表单 原文链接：https://note.noxussj.top/?source=sifo 通常用于选择日期 按需引入方式 如果是完整引入可跳过此步骤 import Vue from ‘vue’ import { ElForm,…