vue前端實(shí)現(xiàn)表格數(shù)據(jù)增查改刪功能
一、添加（增）-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}；為了后面獲取對(duì)象的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對(duì)應(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ù)的獲?。簊lot-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
}總結(jié)
到此這篇關(guān)于vue前端實(shí)現(xiàn)表格數(shù)據(jù)增查改刪功能的文章就介紹到這了,更多相關(guān)vue表格數(shù)據(jù)增查改刪內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于Vue實(shí)現(xiàn)本地消息隊(duì)列MQ的示例詳解
這篇文章為大家詳細(xì)主要介紹了如何基于Vue實(shí)現(xiàn)本地消息隊(duì)列MQ, 讓消息延遲消費(fèi)或者做緩存,文中的示例代碼講解詳細(xì),需要的可以參考一下2024-02-02
這篇文章主要給大家介紹了vue懶加載和子組件懶加載有什么區(qū)別,Vue懶加載指的是對(duì)圖片等資源的延遲加載,而子組件懶加載則是指延遲加載組件實(shí)例,文中通過代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下2023-12-12
我們?cè)谧鲰?xiàng)目經(jīng)常會(huì)遇到組件功能不能滿足業(yè)務(wù)需求的時(shí)候,這時(shí)候需要在原有的組件上進(jìn)行二次封裝,下面這篇文章主要給大家介紹了關(guān)于Vue組件二次封裝的一些實(shí)用技巧,需要的朋友可以參考下2022-04-04
Vue Axios異步與數(shù)據(jù)類型轉(zhuǎn)換問題淺析
總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路，Axios是一個(gè)開源的可以用在瀏覽器端和Node JS的異步通信框架，主要作用就是實(shí)現(xiàn)AJAX異步通信2023-01-01
uniapp使用webview內(nèi)嵌H5的注意事項(xiàng)詳解
在移動(dòng)應(yīng)用開發(fā)中,uniApp框架提供了一種跨平臺(tái)的解決方案,允許開發(fā)者使用一套代碼來構(gòu)建iOS、Android等多平臺(tái)的應(yīng)用,這篇文章主要給大家介紹了關(guān)于uniapp使用webview內(nèi)嵌H5的注意事項(xiàng),需要的朋友可以參考下2024-07-07
在Flask項(xiàng)目中集成并訪問Vue前端項(xiàng)目的流程步驟
在現(xiàn)代?Web?開發(fā)中,前后端分離的架構(gòu)模式越來越流行,前端通常使用?Vue、React?等框架開發(fā),而后端則使用?Flask、Django?等框架提供?API?服務(wù),本文將詳細(xì)介紹如何在一個(gè)?Flask?項(xiàng)目中集成?Vue?前端項(xiàng)目,并確保能夠正確訪問和運(yùn)行,需要的朋友可以參考下2025-03-03
今天小編就為大家分享一篇vue-cli webpack 引入swiper的操作方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue.config.js中配置Vue的路徑別名的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue2如何實(shí)現(xiàn)vue3的teleport
這篇文章主要介紹了vue2如何實(shí)現(xiàn)vue3的teleport，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue?cli?局部混入mixin和全局混入mixin的過程
這篇文章主要介紹了vue?cli?局部混入mixin和全局混入mixin的過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05