我要评论
一、添加（增）-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表格数据增查改删内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论