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

这篇具有很好参考价值的文章主要介绍了Ant Design Vue实现表格双击编辑、添加新行、文字提示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

我:做不了

产品:老板提的

我:好的,可以做

老板提的不能做也滴做😂

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

表格双击编辑单元格

想要实现双击编辑单元格,先开发一个简单的表格(废话)
Ant Design Vue实现表格双击编辑、添加新行、文字提示

 <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>

Ant Design Vue实现表格双击编辑、添加新行、文字提示
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和我们表格的数组,对应数据都成功作出修改
Ant Design Vue实现表格双击编辑、添加新行、文字提示

添加新行

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

Ant Design Vue实现表格双击编辑、添加新行、文字提示
一个实现思路是往数组中添加一行新的空数据

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

添加的新数据我们也可以进行双击编辑功能
Ant Design Vue实现表格双击编辑、添加新行、文字提示

文字提示

如果我们想要实现文字提示功能,并且想要多行内容展示,需要使用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
Ant Design Vue实现表格双击编辑、添加新行、文字提示

到此所有的需求都实现了,本人蒟蒻一枚,大佬请划走(轻点喷)…文章来源地址https://www.toymoban.com/news/detail-500051.html

到了这里,关于Ant Design Vue实现表格双击编辑、添加新行、文字提示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Ant Design Vue Table 嵌套子表格的数据刷新方法

    父子组件各自负责,在table中嵌套了子表格后,首次加载表格时,父组件会实例化子组件并传递参数,折叠后再次展开时,只会传递参数,子组件的数据刷新就属于子表格了。如 @@@code template #expandedRowRender=\\\"{ record }\\\" originIndex style= \\\"margin-left: 55px; margin-right: 50px; background-color:

    2024年02月09日
    浏览(37)
  • Vue 3 中 Ant Design Vue 如何自定义表格 Table 的表头(列头)内容?

    项目用到的是 Ant Design Vue (2.2.8) 组件库,开发中遇到一个如下图的表格,有些表头文本后面会有一些自定义图标,鼠标移入图标时显示对应的审批时间提示。当前列如果没有审批时间就会隐藏图标,只展示列头文本。 使用 Ant Design Vue 基础的 Table 组件是无法满足这个场景的

    2024年02月16日
    浏览(45)
  • ant-design-vue的table表格行合并和列合并

    场景说明: 1、列合并:需要在表格最后一列进行合并,如图: 思路:相当于是第二列的最后一栏(colSpan )占比5列,第2列后面的4列最后一行(colSpan )占比0。 代码示例 行合并需求如图:将指定列的多行合并成一行 思路:和合并列差不多;第一列的第一行和第二行要合并

    2024年02月16日
    浏览(40)
  • 保姆级教程:Ant Design Vue中 a-table 嵌套子表格

    前端为Ant Design Vue 版本为1.6.2,使用的是vue2 Ant Design Vue中 a-table 嵌套子表格,说的可能稍微墨迹了点,不过重点内容都说的比较详细,利于新人理解,高手可以自取完整代码 下图为官网图,会在每行最前面多一个加号,点击后会展开,看到子表格的数据 子格嵌套从代码层简

    2024年02月01日
    浏览(60)
  • Ant Design Vue 中将 Table 表格中的数字类型转换为文字的方法详解

    在使用 Ant Design Vue 开发时,有时需要将 Table 表格中的数字类型字段转换为对应的文字表示,以提供更直观的数据展示。本文将详细介绍在 Ant Design Vue 中将 Table 表格中的数字类型转换为文字的方法,帮助您灵活地处理数据展示需求。 在实际的应用中,我们经常会遇到需要将

    2024年02月11日
    浏览(44)
  • vue3 组合式 ant.design组件Table嵌套表格,从后端获取数据并动态渲染

    在根据官方文档使用ant.design中的嵌套表格时,发现官方文档很多地方都不够详细。在过程中踩了不少坑,例如: 子表如何获取父表的数据? 如何获取子表的行索引? 如何让子表的数据源来自父表该行的数据? 总之,最后还是磕磕绊绊做完了功能,于是第一时间把代码整理

    2024年02月15日
    浏览(46)
  • 使用vue-easytable实现仿excel表格,支持可编辑、添加删除行、虚拟表格等功能

    使用npm安装vue-easytable 在 main.js 中写入以下内容: 代码实现 效果  表格配置 参数 说明 类型 可选值 默认值 tableData 表格数据 Array - - footerData 表格footer 汇总数据,数据结构和 tableData 一致 Array - - columns 列配置,具体项见下表 columns 配置 Array - - showHeader 是否展示表头 Boolean -

    2024年02月08日
    浏览(56)
  • SpringBoot + Ant Design Vue实现数据导出功能

    以xlsx格式导出所选表格中的内容 要求进行分级 设置表头颜色。 首先我们需要添加一个用于到导出的按钮上去,像这样的: 至于它放哪里,是什么样式可以根据自己的需求决定。 按钮有了,下来我们开始实现这个按钮的功能。 导出数据确定。 表格设置: 表头添加以下代码

    2024年02月10日
    浏览(48)
  • ElementUI table表格组件实现双击编辑单元格失去焦点还原,支持多单元格

    在使用ElementUI table表格组件时有时需要双击单元格显示编辑状态,失去焦点时还原表格显示。 实现思路: 在数据中增加 isFocus:false .控制是否显示 在table中用 @cell-dblclick 双击方法 先看效果: 上源码:在表格模板中用scope.row.isFocus focusLabelName==\\\'姓名1控制多个单元格显示 方法:

    2024年02月21日
    浏览(47)
  • 前端实现真实可动态变化进度条,axios+ Ant Design Vue实现.

    最近有一个新需求,要求在前端实现真实的进度条展示,我首先想到了  Ant Design Vue的upload组件, 在antd官网里upload组件不仅有上传功能,并且还附带了 Progress 进度条组件, 还拥有上传成功和失败的两种状态的区分,可以说是十分贴心了,如图  但是很可惜这个组件上传文件的话,你要

    2024年02月09日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包