首页 > 其他分享 >单元格内实现可编辑并保存,并实现精准定位到当前点击的单元格?

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

时间:2023-11-14 23:32:22浏览次数:33  
标签:index 实现 单元格 event cellDoubleClice 双击 精准 row

<el-table
          :data="
            this.tableData.slice(
              (this.currentPage - 1) * this.pagesize,
              this.currentPage * this.pagesize
            )
          "
          border
          fit
          height="500px"
          highlight-current-row
          style="width: 100%"
          @cell-dblclick="cellDblclick"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            v-for="(item, i) in cols"
            :key="i"
            align="center"
            :prop="item.prop"
            :label="item.label"
          >
            <template slot-scope="{row }">
              <el-input
                v-if="cellDoubleClice"
                v-model="row[item.prop]"
                ref="input"    
              ></el-input>
              <span v-else>{{ row[item.prop] }}</span>
            </template>
          </el-table-column>
        </el-table>


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

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

标签:index,实现,单元格,event,cellDoubleClice,双击,精准,row
From: https://blog.51cto.com/M82A1/8380304

相关文章

  • Android app的暗黑模式适配实现
    原文地址:Androidapp的暗黑模式适配实现-Stars-One的杂货小窝很久之前放在草稿箱的一篇简单笔记,是之前蓝奏云批量下载工具Android版本实现暗黑主题的适配记录本文所说的这里的暗黑主题,应该只支持Android10系统,不过我手头的Flyme系统(Android9)上测试也有效果,其他低版本......
  • 嵌入式Linux adbd实现概要梳理(基于STM32MP157D+Buildroot)
    关键词:USBGadget、dwc2、configfs、functionfs、adbd等等。基于STM32MP157D简单记录ADB实现的过程,涉及到USB、Gadget、configfs、functionfs、adbd、ADB协议等等。基于Buildroot2020.02.6编译adbd运行于设备,和PCWindows交互的简要框图:1Linux下USBGadget1.1Linux内核Gad......
  • Hippo4j 用户体系对接 LDAP 指导流程 及 实现思路
    (目录)Hippo4j用户体系对接LDAPFeature:serveraddLdapuserauthenticationissue:https://github.com/opengoofy/hippo4j/pull/1392Hippo4j接入Ldap指导在application.properties配置文件中,配置下面相关信息:此配置文件示例在同目录下的ldap-back.properties......
  • 常见面试题-Spring的aop和ioc如何实现?
    Spring的aop和ioc怎么实现?Spring的IOC是如何实现的呢?Spring的IOC是通过工厂+反射去实现的,在IOC中,Spring会将创建的Bean都放在工厂中,我们可以通过@Configuration来定义配置类,在配置类中通过@Bean来将Bean创建在Bean工厂中,在对Bean进行实例化时,使用的......
  • 金蝶云星空表单插件实现父窗体打开子窗体,并携带参数到子窗体
     父窗体打开子窗体准备BillShowParameterOtherInAdd=newBillShowParameter(){FormId=FormIdConst.STK_MISCELLANEOUS,//子窗体ParentPageId=base.View.PageId,//父窗......
  • Spring Cloud Gateway实现鉴权认证流程总结(一)
    认证、授权、凭证1.1认证(Authentication)认证表示你是谁。系统如何正确分辨出操作用户的真实身份,比如通过输入用户名和密码来辨别身份。1.2授权(Authorization)授权表示你能干什么。系统如何控制一个用户能看到哪些数据和操作哪些功能,也就是具有哪些权限。1.3凭证(Credential)表示你......
  • Spring Cloud Gateway实现鉴权认证流程总结(二)
    微服务认证方案微服务认证方案目前有很多种,每个企业也是大不相同,但是总体分为两类,如下:网关只负责转发请求,认证鉴权交给每个微服务商控制统一在网关层面认证鉴权,微服务只负责业务你们公司目前用的是哪种方案?先来说说第一种方案,有着很大的弊端,如下:代码耦合严重,每个微服务都要......
  • 学习C语言的一天(2):简易扫雷的实现
    思路:建立三个文件,头文件用于声明函数和保存程序的声明,源文件(1)用于函数的具体实现,源文件(2)用于主函数的实现建立扫雷菜单。建立2个二维数组,一个用于布置雷(下文称雷二),一个用于打印棋盘(下文称棋盘二);最终效果如下:(实际效果中保留上面的棋盘,而下面的布置雷的效果不需要打印,这里打印是......
  • 超时实现 select 计时器
     github.com\eclipse\paho.mqtt.golang@v1.4.3\token.go//WaitTimeoutimplementstheTokenWaitTimeoutmethod.func(b*baseToken)WaitTimeout(dtime.Duration)bool{  timer:=time.NewTimer(d)  select{  case<-b.complete:    if!tim......
  • 工地环境监测系统实现:实时在线监测、联动自动控制、超标报警、数据分析等功能
    智慧工地云平台源码 智慧工地全套源码随着我国城市的发展,对住宅等的建设要求不断提高,为了满足人民的需要,不断进行规划、建设,但与此同时由于施工、运输、设备、建筑材料、施工设备等因素的影响,工地环境污染一直没有得到有效治理。为控制建筑工地的粉尘、噪音等的污染,必须加强对施工......