vue前端实现表格数据增查改删功能

更新时间：2024年05月10日 10:34:38 作者：崛起猩球@悟空

增删改查是我们写项目百分之七十会遇到的代码,下面这篇文章主要给大家介绍了关于vue前端实现表格数据增查改删功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、添加（增）-unshift首插入

1、【新增按钮】添加点击事件cilck；

<el-button @click="handleAdd()">添加</el-button>

2、点击【新增按钮】：

2.1、打开弹框；

2.2、内容为空。

handleAdd() {
        this.dialogVisible = true
        this.addForm = {
          name: '',
          number: '',
          score: '',
          sex: ''
        }
      },

3、弹框【确定】：

3.1、动态数据表格插入新增数据；

3.2、全部数据表格插入新增数据；

3.3、关闭弹框。

handleOk() {
        this.tableData.unshift(this.addForm)
        this.allData.unshift(this.addForm)
        this.dialogVisible = false
      }

二、搜索（查）-filter过滤

1、【查询】按钮添加点击事件cilck；

<el-button type="primary" @click="handleSelect()">查询</el-button>

2、点击【查询】：

2.1、姓名查询：

 handleSelect() {
         this.tableData = this.allData.filter(item => {
            if (item.name.includes(this.formInline.name)) {
              return true
          }
        })
      }

2.2、学号查询：

handleSelect() {
 this.tableData = this.allData.filter(item => {
            if (item.number === this.formInline.number) {
              return true
          }
        })
}

2.3、姓名+学号查询：

 handleSelect() {
        //姓名+学号同时为空
        if (this.formInline.name === '' && this.formInline.number === '') {
          this.tableData = [...this.allData]
        } else if (this.formInline.name !== '' && this.formInline.number === '') {
          //姓名查询，学号为空
          this.tableData = this.allData.filter(item => {
            if (item.name.includes(this.formInline.name)) {
              return true
            }
          })
        } else if (this.formInline.name === '' && this.formInline.number !== '') {
          //学号查询，姓名为空
          this.tableData = this.allData.filter(item => {
            if (item.number === this.formInline.number) {
              return true
            }
          })
        } else if (this.formInline.name !== '' && this.formInline.number !== '') {
          //姓名+学号查询，都不为空
          this.tableData = this.allData.filter(item => {
            if (item.name.includes(this.formInline.name) && item.number === this.formInline.number) {
              return true
            }
          })
        }
      }

三、编辑（改）-splice替换

1、【编辑】按钮绑定点击事件；

当前行获取（scope）。

<el-button type="success" plain size="small" @click="handleEdit(scope)">编辑</el-button>

2、点击【编辑】：

2.1、判断为非添加（编辑）状态；

2.1.1、弹框标题为【编辑】；

2.1.2、编辑状态姓名不可编辑；

<el-form-item label="姓名">
          <el-input v-model="addForm.name" :disabled="isView || !isAdd"></el-input>
</el-form-item>

2.2、解构函数：{...scope.row}；为了后面获取对象的index；

2.3、打开弹框。

handleEdit(scope) {
        this.isView = false
        this.isAdd = false
        this.tkTitle = '编辑'
        this.addForm = { ...scope.row }
        this.dialogVisible = true
      },

3、点击【确定】：

3.1、判断弹框状态是【添加】or【编辑】；

3.2、获取index；

3.3、找到表格index的一条，替换成修改后的当前弹框数据。

4、关闭弹框。

 handleOk() {
        //添加确定
        if (this.isAdd) {
          this.tableData.unshift(this.addForm)
          this.allData.unshift(this.addForm)
          this.dialogVisible = false
        } else {
          //编辑确定
          const index = this.tableData.findIndex(item => {
            return item.name = this.addForm.name
          })
          if (index !== -1) {
            this.tableData.splice(index, 1, this.addForm)
          }
          this.dialogVisible = false
          this.allData = [...this.tabledata]
        }

四、删除（删）-splice删除

1、【删除】按钮绑定点击事件；

<el-button type="warning" plain size="small" @click="handleDelete(scope)">删除</el-button>

2、点击【删除】：

2.1、找到当前行的index；

2.2、删除当前index对应的数据。

 handleDelete(scope) {
        const index = this.tableData.findIndex(item => {
          return item.name === scope.row.name
        })
        if (index !== -1) {
          this.tableData.splice(index, 1)
          this.allData =  [...this.tableData]
        }
      }

五、重置

1、【重置】添加点击事件cilck；

<el-button @click="handleReset()">重置</el-button>

2、点击【重置】：

2.1、查询条件为空；

2.2、表格内容显示全部：运用解构函数，allData数组浅拷贝给tableData数组。

handleReset() {
        this.formInline = {
          name: '',
          number: '',
          sex: ''
        }
        this.tableData = [...this.allData]
      }

六、查看

1、【查看】绑定点击事件click；

显示表格时,当前行数据的获取：slot-scope="scope"

<template slot-scope="scope">
          <el-button type="primary" plain size="small" @click="handleView(scope)">查看</el-button>
</template>

2、点击【查看】：

2.1、弹框是“查看”状态；

2.1.1、弹框标题显示为“查看”；

2.1.2、查看状态下，内容不可编辑；

2.2、弹框显示当前行数据；

2.3、打开弹框。

:title="tkTitle"

:disabled="isView"

handleView(scope) {
        this.isView = true
        this.tkTitle = '查看'
        this.addForm = scope.row        
        this.dialogVisible = true
      }

总结

到此这篇关于vue前端实现表格数据增查改删功能的文章就介绍到这了,更多相关vue表格数据增查改删内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

基于Vue实现本地消息队列MQ的示例详解
这篇文章为大家详细主要介绍了如何基于Vue实现本地消息队列MQ, 让消息延迟消费或者做缓存,文中的示例代码讲解详细,需要的可以参考一下
2024-02-02
vue懒加载和子组件懒加载的区别详解
这篇文章主要给大家介绍了vue懒加载和子组件懒加载有什么区别,Vue懒加载指的是对图片等资源的延迟加载,而子组件懒加载则是指延迟加载组件实例,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下
2023-12-12
Vue组件二次封装的一些实用技巧总结
我们在做项目经常会遇到组件功能不能满足业务需求的时候,这时候需要在原有的组件上进行二次封装,下面这篇文章主要给大家介绍了关于Vue组件二次封装的一些实用技巧,需要的朋友可以参考下
2022-04-04
Vue Axios异步与数据类型转换问题浅析
总的来说这并不是一道难题，那为什么要拿出这道题介绍？拿出这道题真正想要传达的是解题的思路，以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路，Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架，主要作用就是实现AJAX异步通信
2023-01-01
uniapp使用webview内嵌H5的注意事项详解
在移动应用开发中,uniApp框架提供了一种跨平台的解决方案,允许开发者使用一套代码来构建iOS、Android等多平台的应用,这篇文章主要给大家介绍了关于uniapp使用webview内嵌H5的注意事项,需要的朋友可以参考下
2024-07-07
在Flask项目中集成并访问Vue前端项目的流程步骤
在现代 Web 开发中,前后端分离的架构模式越来越流行,前端通常使用 Vue、React 等框架开发,而后端则使用 Flask、Django 等框架提供 API 服务,本文将详细介绍如何在一个 Flask 项目中集成 Vue 前端项目,并确保能够正确访问和运行,需要的朋友可以参考下
2025-03-03
vue-cli webpack 引入swiper的操作方法
今天小编就为大家分享一篇vue-cli webpack 引入swiper的操作方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue.config.js中配置Vue的路径别名的方法
这篇文章主要介绍了vue.config.js中配置Vue的路径别名的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
vue2如何实现vue3的teleport
这篇文章主要介绍了vue2如何实现vue3的teleport，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue cli 局部混入mixin和全局混入mixin的过程
这篇文章主要介绍了vue cli 局部混入mixin和全局混入mixin的过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05