当前位置:首页 » 《关于电脑》 » 正文

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

25 人参与  2024年05月13日 16:52  分类 : 《关于电脑》  评论

点击全文阅读


一、添加(增)-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      }


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/107983.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 抽卡后,气运之子怎么都缠上来了小说(夏挽棠)(抽卡后,气运之子怎么都缠上来了)全书+后续+结局在线阅读
  • 前传爱意随风消逝续集:全文+番外乔清浅宋轻舟:结局+番外新上热文
  • 宋昭黎陆铭绪(假如从没拥抱你)前文+全本完整阅读预售作品抢先看
  • 终章小说搬空海港!我携军舰嫁军官躺赢了完结篇(温婉历战)已更新+延伸(搬空海港!我携军舰嫁军官躺赢了)清爽版
  • 贵妻在上:废材老公来护航完结篇(贵妻在上:废材老公来护航)章节目录+章节前文(宋锦瑶霍少霆)全章无套路在线
  • 离婚后,前夫一家给我跪下了隐藏剧情_明白双宿双飞江城必读文_小说后续在线阅读_无删减免费完结_
  • 乔芊芊顾宴夜小说(乔芊芊顾宴夜)(踹了渣男后,禁欲大佬为我失控)前传+阅读全新作品预订
  • 假如从没拥抱你小说(宋昭黎陆铭绪)全本完整阅读最新章节(假如从没拥抱你)_笔趣阁
  • 特工医妃,摄政王的腹黑掌上欢前言+后续_苏清叙裴玄褚最新阅读_小说后续在线阅读_无删减免费完结_
  • 热文推荐绑定站姐系统后,我成娱乐巨头了附加(沈霁月沈暨星)(绑定站姐系统后,我成娱乐巨头了)最新章节列表
  • 爱你的事当做秘密惊天黑幕_鹿言裴禹连载_小说后续在线阅读_无删减免费完结_
  • 和前夫穿越后又重生了番外+结局(挽星阙靖安)小说在线阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1