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

06-28 1046阅读

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

一、添加(增)-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、打开弹框。

:
:disabled="isView"
handleView(scope) {
        this.isView = true
        this.tkTitle = '查看'
        this.addForm = scope.row        
        this.dialogVisible = true
      }
VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]