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

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

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

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

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

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

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

 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
            }
          })
        }
      }

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

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

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

 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]
        }

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

 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]
        }
      }

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

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

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

:title="tkTitle"

:disabled="isView"

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