Ant Design Vue实现表格双击编辑、添加新行、文字提示

news2024/11/23 12:31:07

早上刚上班,产品就朝我工位走了过来,一看大事不好,肯定又是来提需求的!

产品:做一个表格,要实现双击编辑的功能

我:做不了

产品:老板提的

我:好的,可以做

老板提的不能做也滴做😂

申明:项目基于Vue+Ant Design实现

表格双击编辑单元格

想要实现双击编辑单元格,先开发一个简单的表格(废话)
image.png

 <a-table :columns="columns" :data-source="data">     
 </a-table>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
  },
]
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: 'nice',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: 'loser',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: 'teacher',
  },
]

现在实现Name列可双击编辑的功能,设置Name列可以自定义

  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    scopedSlots:{customRender:'name'}
  },

在表格中自定义Name列的内容

<template slot="name" slot-scope="record">
      <editable-cell :record="record" @changeAll="onCellChange" />
</template>

其中editable-cell是需要我们自己写的一个子组件

双击编辑表格单元格的原理就是,默认展示表格内容,双击单元格之后展示一个input框,input框也绑定了这个值,input框失去焦点之后,并将这个值传回给父组件

子组件editable-cell

我们首先需要实现的就是将我们的原本表格中的内容展示出来,表格展示的内容是存在于父组件中的。

这里就涉及到了父子组件通信,子组件接收父组件传递的内容是通过props

  props: {
    record: Object
  },

获取到表格内容之后,然后就是表格内容的展示

    <div v-show="editable == false" @dblclick="edit">
      {{ value || ' ' }}
    </div>  
    //其中value的值为
    value: this.record.name,

editable初始值是false,默认展示的就是value,value的值就是我们从父组件获取的表格的值text
并且这个div块绑定了一个双击函数edit

 edit() {
      this.editable = true
      this.$nextTick(() => {
        this.$refs.myInput.focus()
      })
    },

edit函数是将editable的值设置为true,设置为true之后展示的是input输入框,并设置input框自动获取焦点。这里需要注意的是直接写this.$refs.myInput.focus()不会生效,需要设置等下次DOM更新之后再触发这个事件。

    <div v-show="editable" >
      <a-input
        v-model="value"
        @pressEnter="check"
        @blur="check"
        size="small"
        ref="myInput"
      />
    </div>

image.png
input框绑定了两个事件,失去焦点和按下enter键。触发的是一个函数check函数,将editable的值设置为false,单元格展示的就是值而不再是输入框,这里我们需要将修改的值传回给父组件,子向父传递是通过$emit

 check() {
      this.editable = false
      this.record.name=this.value
      this.$emit('changeAll', this.value)
    }  

子组件触发了changAll函数

 onCellChange(record) {
      console.log(record,'123')
      console.log(this.data,'999')
    },

这里我们打印了record和我们表格的数组,对应数据都成功作出修改
image.png

添加新行

<div class="operate">
     <a-button type="dashed" style="width: 100%" icon="plus" @click="addList">添加</a-button>
</div>

image.png
一个实现思路是往数组中添加一行新的空数据

  addList() {
      this.data1.push({
        key: this.data1.length +1,
        name: '' ,
        age: '',
        address: '',
        tags: '',
      })
      console.log(this.data1)
    },

添加的新数据我们也可以进行双击编辑功能
image.png

文字提示

如果我们想要实现文字提示功能,并且想要多行内容展示,需要使用a-tooltip组件

  <a-tooltip placement="topLeft">
       <template #title>
            Name: {{ record.name }},<br />
            Key: {{ record.key }}
        </template>
       <editable-cell :record="record" @changeAll="onCellChange" />
  </a-tooltip>

多行内容展示自定义template
image.png

到此所有的需求都实现了,本人蒟蒻一枚,大佬请划走(轻点喷)…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/684388.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

什么是测试开发工程师?

目录 前言&#xff1a; SDET是做啥的&#xff1f; 为什么需要测试开发&#xff1f; SDET的角色和职责 技术和软技能 非技术能力&#xff1a; 沟通能力 时间管理和组织能力 良好的工作态度 热情 日常工作 事业进阶 总结 前言&#xff1a; 测试开发工程师 (Software …

AIDL中 Binder 的具体流转过程(源码讲解)

前言 本篇文章承接上篇 Binder对象的流转&#xff08;系统服务的调用过程、AIDL的使用过程&#xff09; 上一篇简单笼统地说明了流转的大致方向与手段&#xff0c;此篇文章我们将深入代码层面&#xff0c;看看 Binder 到底是怎么实现的。 一、一个简单的AIDL示例 客户端&…

网关全局过滤器:Java中的强大工具

文章目录 网关过滤器简介网关过滤器的作用过滤器的生命周期实际应用示例权限过滤器解析 总结 网关过滤器简介 网关过滤器是一个位于应用程序和底层服务之间的组件&#xff0c;它截取进出网络请求&#xff0c;并提供对请求和响应进行处理的机制。它可以在请求到达目标服务之前或…

测试老鸟的职业生涯,从初识到功能再到自动化测试,他都经历了啥...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 张工&#xff1a;…

Qt/C++编写onvif工具(搜索/云台/预置位/OSD/录像存储)

一、前言 从最初编写这个工具开始的时间算起来&#xff0c;至少5年多&#xff0c;一直持续完善到今天&#xff0c;这个工具看起来小也不小大也不大&#xff0c;但是也是经历过无数个现场的洗礼&#xff0c;毫不夸张的说&#xff0c;市面上能够遇到的主流的厂商的设备&#xff…

深入探究 ReentrantLock 的应用和原理

博主介绍&#xff1a; ✌博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家✌ Java知识图谱点击链接&#xff1a;体系化学习Java&#xff08;Java面试专题&#xff09; &#x1f495;&#x1f495; 感兴趣的同学可以收…

微信开发者工具-导入小程序项目会自动切换到小游戏打开出错的解决方案

微信开发者工具导入小程序项目会自动切换到小游戏打开出错&#xff0c; 提示Error 提示appid错误&#xff0c;如下图 错误 Error: INVALID_TOKEN...表示网络已断开&#xff0c; 检查开发工具是否连接到网络&#xff0c; 或注销重新登录开发工具试试 提示缺少文件 如果提示缺…

智能安全用电技术电气火灾监控的应用介绍 安科瑞 许敏

摘要&#xff1a;智能安全用电技术在智慧监狱的应用&#xff0c;可以提升监狱智能化管控水平和降低能耗。文章以智能安全用电技术为入手点&#xff0c;简要分析了监狱用电现状&#xff0c;论述了智能安全用电技术在智慧监狱中的具体应用&#xff0c;对智能安全用电技术在智慧监…

【面试题12】HTTP协议三次握手和四次挥手分别是什么

文章目录 一、概览二、三次握手2.1 第一步&#xff1a;客户端向服务端发送 SYN&#xff08;同步&#xff09;包2.2 第二步&#xff1a;服务端返回 ACK&#xff08;确认&#xff09;包和 SYN 包2.3 第三步&#xff1a;客户端返回 ACK&#xff08;确认&#xff09;包 三、四次挥手…

今日分享:音频格式转换软件

小林最近特别喜欢唱歌&#xff0c;不过总是遇到一些麻烦&#xff0c;例如自己录制的音频格式无法在其他设备上播放&#xff0c;或者想把某个歌曲转成适合自己播放的格式。这时候就需要一个好用的音频格式转换器啦&#xff01;小林找了一圈&#xff0c;终于找到了几款可爱又好用…

大数据应用——工程实践III

任务一&#xff1a;完成Hadoop集群部署前环境的准备工作 1.1 虚拟机环境准备 1. 安装虚拟机 2. 克隆虚拟机 3. 修改网络配置 4. 修改主机名和映射 5. 关闭防火墙 1.2 安装JDK 1.3 安装Hadoop 1.4 集群配置 1. 编写集群分发脚本xsync 2. 集群部署规划 表 1.1 hadoop101 …

一份老网工珍藏多年的网络配置笔记

我的网工朋友大家好 俗话说得好&#xff0c;好记性不如烂笔头。 学生时代&#xff0c;我们考试前最喜欢看的就是学霸笔记&#xff0c;但工作之后&#xff0c;却没有人会愿意借给你他们的珍藏笔记了。 今天&#xff0c;想给你分享一个老网工分享在网上的精选笔记&#xff0c;…

java 8 新特性讲解Optional类--Fork/Join 框架--新时间日期API--以及接口的新特性和注解

Optional类 到目前为止&#xff0c;臭名昭著的空指针异常是导致Java应用程序失败的最常见原因。以前&#xff0c;为了解决空指针异常&#xff0c;Google公司著名的Guava项目引入了Optional类&#xff0c;Guava通过使用检查空值的方式来防止代码污染&#xff0c;它鼓励程序员写…

六、Docker容器数据卷

学习参考&#xff1a;尚硅谷Docker实战教程、Docker官网、其他优秀博客(参考过的在文章最后列出) 目录 前言一、容器数据卷1.1 容器数据卷1.2 怎么用1.3 能干什么 二、实践案例2.1 启动ubuntu容器实例&#xff0c;挂载目录&#xff1a;2.2 在ubuntu容器实例的/tmp/docker_data中…

Android 组件化架构思路

作者&#xff1a;往事一块六毛八 为什么要模块化/组件化 随着APP版本不断的迭代&#xff0c;新功能的不断增加&#xff0c;业务也会变的越来越复杂&#xff0c;APP业务模块的数量有可能还会继续增加&#xff0c;而且每个模块的代码也变的越来越多&#xff0c;这样发展下去单一…

GNS3报错“unable to open TAP device tap0 (No such file or directory)”解决

系统&#xff1a;MacOS 13.4 GNS3版本&#xff1a;2.2.35.1 Tunnelblick&#xff1a;3.8.8b 起因 在gns3中使用cloud节点创建 tap 接口连接路由器报错&#xff1a; 解决办法 借助 Tunnelblick工具创建 Tap 虚拟网卡。Tunnelblick下载地址&#xff1a; https://tunnelblic…

Kubernetes入门实战课-初始容器

Kubernetes入门实战课-初始容器 文章目录 Kubernetes入门实战课-初始容器课前准备初始容器Docker 的形态Docker 的安装Docker 的架构 容器的本质隔离原因与虚拟机区别隔离是怎么实现的 镜像创建容器镜像&#xff1a;如何编写正确、高效的Dockerfile镜像的内部机制是什么Dockerf…

MySQL数据库连接查询和存储过程

MySQL数据库连接查询和存储过程 一、连接查询1、内连查询2、左连接3、右链接 二、存储过程1、存储过程简介2、存储过程的优点3、语法3.1 参数分类3.2 不加参数的存储过程3.3 带参数的存储过程3.4删除存储过程3.5 事务和存储过程有什么区别&#xff1f; 三、总结1、连接查询2、存…

【Java项目中 利用Redis实现数据缓存】

文章目录 Java SpringBoot项目中 用Redis实现数据缓存1 环境搭建1.1 maven坐标1.2 配置文件1.3 配置类 2 实现缓存短信验证码3 缓存菜品数据4 Spring Cache 缓存框架4.1 Spring Cache介绍4.2 Spring Cache常用注解4.3 Spring Cache使用方式 Java SpringBoot项目中 用Redis实现数…

一文了解Moonbeam互连合约

什么是互连合约Connected Contracts 简单来说&#xff0c;互连合约是通过Moonbeam连接其他区块链上的一个或多个智能合约&#xff0c;其允许目标链上的用户通过跨链消息传递协议在一个应用中操作不同链上的资产或是服务。 通过互连合约方案&#xff0c;不同迥异的公链技术架构…