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

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

添加

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；

查询

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）。

编辑

2、点击【编辑】：

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

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

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

 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、【删除】按钮绑定点击事件；

删除

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；

重置

2、点击【重置】：

2.1、查询条件为空；

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

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

六、查看

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

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

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       }