vue element 表格内的复制粘贴功能

最新推荐文章于 2024-05-14 16:39:58 发布

原创最新推荐文章于 2024-05-14 16:39:58 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在项目中为用户提供便捷的数据处理功能，通过点击复制按钮复制表格行数据，并通过粘贴按钮将数据粘贴到表格的最后一行。复制粘贴功能的实现基于Vue.js，通过条件判断控制按钮显示与隐藏，使用JSON.parse和JSON.stringify进行数据的深拷贝和操作。在粘贴时，确保复制的数据ID与原有数据不同，以避免覆盖原有信息。用户可以修改或直接保存数据。

最近项目里面为了方便用户增加了复制粘贴功能来更方便的处理数据要求如下：

点击复制把此条的数据复制点击粘贴粘贴到最后一行

复制粘贴按钮做个权限 该出现的出现 不该出现的消失
<el-button v-if="scope.row._id === cell_click_id && isDel && !scope.row.show" type="primary" size="small" @click="reBlur(scope.row)">复制</el-button>

          <el-button v-if="scope.row._id === cell_click_id && isDel && scope.row.show" type="primary" size="small" @click="putBlur(scope.row)">粘贴</el-button>

//复制
    reBlur(item) {
      this.reForm = JSON.parse(JSON.stringify(item))//reForm 是在data中定义的 用来存放复制的这条数据
    },

//粘贴 
putBlur() {
      for (const i in this.reForm) {
        this.reForm['_id'] = null //id要不同 负责会触发 同一个行的 cell_click
        this.$set(this.ruleForm, i, this.reForm[i]) // rulform是原来的对象 reform[i]是目前所复制的这条
      }
    },