Vue?table新增、編輯解讀
更新時間：2023年07月28日 17:24:41 作者：貪吃蛇2120
這篇文章主要介紹了Vue?table新增、編輯，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue table新增、編輯
需求是這樣的，在一個表格后面新增一行數(shù)據(jù)，這一行出現(xiàn)一個表單，通過表單進行編輯
思路是這樣的
- 點擊新增的時候push一條數(shù)據(jù)，然后再push的時候加個狀態(tài)，用來判斷是新增還是編輯
- 然后再需要表單的那個el-table-column里面添加自定義列模板
- 然后編輯的時候需要判斷他是否有新增或者編輯的狀態(tài)，如果有就不允許點擊新增或編輯，此時還需要講數(shù)據(jù)備份一下，不然用戶點擊取消，原數(shù)據(jù)丟失
- 點擊取消的時候，判斷當前狀態(tài)是新增還是編輯，如果是新增就刪除，如果是編輯，就還原數(shù)據(jù)
點擊新增的時候判斷是否有其他狀態(tài)
<template slot-scope="{ row }">
<span v-show="!row.isEdit">{{ row.intentionName }}</span>
<!-- <el-input v-show="row.isEdit" v-model="row.intentionName"></el-input> -->
<el-select
v-show="row.isEdit"
v-model="row.intentionName"
filterable
remote
placeholder="請輸入熱詞"
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>這是插入的input的自定義列模板
//添加按鈕
AddHotWordsShow () {
let message = ''
let flag = true
this.tableData.forEach((item, index) => {
if (item.isAdd) {
message = '請先保存或取消您正在新增的數(shù)據(jù)'
flag = false
return
}
if (item.isEdit) {
message = '請先保存或取消您正在編輯的數(shù)據(jù)'
flag = false
}
})
if (!flag) {
this.$message({
type: 'info',
message: message
})
return
}
// this.isAddButton = true
// 新增一條對象
const AddObj={
intentionName: '',
isEdit: true,
isAdd: true
}
// 添加到這個表格里面去
this.tableData.push(AddObj)
},這是點擊新增或者編輯的時候的按鈕狀態(tài)
<template slot-scope="scope" >
<div v-if="!scope.row.isEdit">
<el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
<el-button type="text" size="small" @click="ClickDelete(scope.row)">刪除</el-button>
</div>
<div v-else>
<el-button @click="dialogFormVisible(scope.row)" type="text" size="small">保存</el-button>
<el-button type="text" size="small" @click="cancel(scope.row,scope.$index)">取消</el-button>
</div>
</template>data定義的數(shù)據(jù)
// 初始化數(shù)據(jù)
tableData: [{
id: 0, //意圖配置id
intentionId: "", //意圖id
virtualEmployeeId: 0, //虛擬員工id
sortNum: 0, //排序
createTime: "2022-10-14 11:30:16",
updateTime: "2022-10-14 11:30:17",
updateUser: "張三",
intentionName:'熱詞', //熱詞
isEdit: false,
// isAddButton:false,
value: ''
}
],
// 搜索數(shù)據(jù)
searchInputValue: '',
// 新增遠程搜索
options: [],
newAddValue: '',
list: [],
loading: false,
states: ["Alabama", "Alaska", "Arizona",
"Arkansas", "California", "Colorado",
"Connecticut", "Delaware", "Florida",
"Georgia", "Hawaii", "Idaho", "Illinois",
"Indiana", "Iowa", "Kansas", "Kentucky",
"Louisiana", "Maine", "Maryland",
"Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri", "Montana",
"Nebraska", "Nevada", "New Hampshire",
"New Jersey", "New Mexico", "New York",
"North Carolina", "North Dakota", "Ohio",
"Oklahoma", "Oregon", "Pennsylvania",
"Rhode Island", "South Carolina",
"South Dakota", "Tennessee", "Texas",
"Utah", "Vermont", "Virginia",
"Washington", "West Virginia", "Wisconsin",
"Wyoming"]
}編輯跟新增是一樣的
// 修改編輯
handleClick(row, index) {
let message = ''
let flag = true // 加鎖
this.tableData.forEach((item, index) => {
if (item.isAdd) {
message = '請先保存或取消您正在新增的數(shù)據(jù)'
flag = false
return
}
if (item.isEdit) {
message = '請先保存或取消您正在編輯的數(shù)據(jù)'
flag = false
}
})
if (!flag) {
this.$message({
type: 'info',
message: message
})
return
}
// 備份原始數(shù)據(jù)
row['oldRow'] = JSON.parse(JSON.stringify(row))
row.isEdit = true
},取消的時候，就判斷是新增還是編輯
// 取消
cancel(row,index){
// 如果是新增的數(shù)據(jù)
console.log(row);
if (row.isAdd) {
this.tableData.splice(index, 1)
// this.$refs.formTable.resetFields()
} else {
// 不是新增的數(shù)據(jù) 還原數(shù)據(jù)
for (const i in row.oldRow) {
row[i] = row.oldRow[i]
}
row.isEdit = false
}
},總結(jié)
就是要定義一些狀態(tài)，判斷這些狀態(tài)的變化，進行操作
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家學(xué)習介紹了如何利用Vue2實現(xiàn)全局水印的效果，文中的示例代碼簡潔易懂，具有一定的借鑒價值，感興趣的小伙伴可以了解下2023-07-07
vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程
這篇文章主要介紹了vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了如何vue中添加音頻和視頻的相關(guān)知識,文中的示例代碼簡潔易懂,具有一定的學(xué)習價值,感興趣的小伙伴可以了解下2023-08-08
這篇文章主要介紹了詳解vue項目接入微信JSSDK的坑,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了Vue 根據(jù)條件判斷van-tab的顯示方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
在當今前端開發(fā)領(lǐng)域,首屏加載速度和 SEO 優(yōu)化已成為衡量 Web 應(yīng)用質(zhì)量的重要指標,Vue3服務(wù)端渲染為解決這些問題提供了優(yōu)雅的解決方案,下面小編就來和大家詳細講講吧2025-05-05
這篇文章主要介紹了Vue.use源碼學(xué)習小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
Vue基于el-breadcrumb實現(xiàn)面包屑功能(操作代碼)
這篇文章主要介紹了Vue基于el-breadcrumb實現(xiàn)面包屑功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
上拉加載更多的分頁功能大家應(yīng)該都見過或者使用過了吧,那么有多少同學(xué)自己實現(xiàn)過嗎,本文我們來簡單實現(xiàn)一個上拉加載更多分頁組件吧2024-11-11
vue2.0 與 bootstrap datetimepicker的結(jié)合使用實例
本篇文章主要介紹了vue2.0 與 bootstrap datetimepicker的結(jié)合使用實例，非常具有實用價值，需要的朋友可以參考下2017-05-05