快捷導(dǎo)航

vue前端實(shí)現(xiàn)表格數(shù)據(jù)增查改刪功能

更新時(shí)間：2024年05月10日 10:34:38 作者：崛起猩球@悟空

增刪改查是我們寫項(xiàng)目百分之七十會(huì)遇到的代碼,下面這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)表格數(shù)據(jù)增查改刪功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

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

1、【新增按鈕】添加點(diǎn)擊事件cilck；

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

2、點(diǎn)擊【新增按鈕】：

2.1、打開彈框；

2.2、內(nèi)容為空。

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

3、彈框【確定】：

3.1、動(dòng)態(tài)數(shù)據(jù)表格插入新增數(shù)據(jù)；

3.2、全部數(shù)據(jù)表格插入新增數(shù)據(jù)；

3.3、關(guān)閉彈框。

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

二、搜索（查）-filter過濾

1、【查詢】按鈕添加點(diǎn)擊事件cilck；

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

2、點(diǎn)擊【查詢】：

2.1、姓名查詢：

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

2.2、學(xué)號(hào)查詢：

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

2.3、姓名+學(xué)號(hào)查詢：

 handleSelect() {
        //姓名+學(xué)號(hào)同時(shí)為空
        if (this.formInline.name === '' && this.formInline.number === '') {
          this.tableData = [...this.allData]
        } else if (this.formInline.name !== '' && this.formInline.number === '') {
          //姓名查詢，學(xué)號(hào)為空
          this.tableData = this.allData.filter(item => {
            if (item.name.includes(this.formInline.name)) {
              return true
            }
          })
        } else if (this.formInline.name === '' && this.formInline.number !== '') {
          //學(xué)號(hào)查詢，姓名為空
          this.tableData = this.allData.filter(item => {
            if (item.number === this.formInline.number) {
              return true
            }
          })
        } else if (this.formInline.name !== '' && this.formInline.number !== '') {
          //姓名+學(xué)號(hào)查詢，都不為空
          this.tableData = this.allData.filter(item => {
            if (item.name.includes(this.formInline.name) && item.number === this.formInline.number) {
              return true
            }
          })
        }
      }

三、編輯（改）-splice替換

1、【編輯】按鈕綁定點(diǎn)擊事件；

當(dāng)前行獲?。╯cope）。

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

2、點(diǎn)擊【編輯】：

2.1、判斷為非添加（編輯）狀態(tài)；

2.1.1、彈框標(biāo)題為【編輯】；

2.1.2、編輯狀態(tài)姓名不可編輯；

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

2.2、解構(gòu)函數(shù)：{...scope.row}；為了后面獲取對象的index；

2.3、打開彈框。

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

3、點(diǎn)擊【確定】：

3.1、判斷彈框狀態(tài)是【添加】or【編輯】；

3.2、獲取index；

3.3、找到表格index的一條，替換成修改后的當(dāng)前彈框數(shù)據(jù)。

4、關(guān)閉彈框。

 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、【刪除】按鈕綁定點(diǎn)擊事件；

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

2、點(diǎn)擊【刪除】：

2.1、找到當(dāng)前行的index；

2.2、刪除當(dāng)前index對應(yīng)的數(shù)據(jù)。

 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、【重置】添加點(diǎn)擊事件cilck；

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

2、點(diǎn)擊【重置】：

2.1、查詢條件為空；

2.2、表格內(nèi)容顯示全部：運(yùn)用解構(gòu)函數(shù)，allData數(shù)組淺拷貝給tableData數(shù)組。

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

六、查看

1、【查看】綁定點(diǎn)擊事件click；

顯示表格時(shí),當(dāng)前行數(shù)據(jù)的獲取：slot-scope="scope"

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

2、點(diǎn)擊【查看】：

2.1、彈框是“查看”狀態(tài)；

2.1.1、彈框標(biāo)題顯示為“查看”；

2.1.2、查看狀態(tài)下，內(nèi)容不可編輯；

2.2、彈框顯示當(dāng)前行數(shù)據(jù)；

2.3、打開彈框。

:title="tkTitle"

:disabled="isView"

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