vue前端实现表格数据——增查改删
崛起猩球@悟空 2024-06-19 17:33:07 阅读 92
一、添加(增)-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 }
上一篇: Stable Diffusion web UI 运行报错 Error while deserializing header: MetadataIncompleteBuffer
下一篇: Java Web实验六:实现购物车
本文标签
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。