Vue?table新增、編輯解讀
更新時(shí)間：2023年07月28日 17:24:41 作者：貪吃蛇2120
這篇文章主要介紹了Vue?table新增、編輯，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Vue table新增、編輯
需求是這樣的，在一個(gè)表格后面新增一行數(shù)據(jù)，這一行出現(xiàn)一個(gè)表單，通過表單進(jìn)行編輯
思路是這樣的
- 點(diǎn)擊新增的時(shí)候push一條數(shù)據(jù)，然后再push的時(shí)候加個(gè)狀態(tài)，用來判斷是新增還是編輯
- 然后再需要表單的那個(gè)el-table-column里面添加自定義列模板
- 然后編輯的時(shí)候需要判斷他是否有新增或者編輯的狀態(tài)，如果有就不允許點(diǎn)擊新增或編輯，此時(shí)還需要講數(shù)據(jù)備份一下，不然用戶點(diǎn)擊取消，原數(shù)據(jù)丟失
- 點(diǎn)擊取消的時(shí)候，判斷當(dāng)前狀態(tài)是新增還是編輯，如果是新增就刪除，如果是編輯，就還原數(shù)據(jù)
點(diǎn)擊新增的時(shí)候判斷是否有其他狀態(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="請(qǐng)輸入熱詞"
: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 = '請(qǐng)先保存或取消您正在新增的數(shù)據(jù)'
flag = false
return
}
if (item.isEdit) {
message = '請(qǐng)先保存或取消您正在編輯的數(shù)據(jù)'
flag = false
}
})
if (!flag) {
this.$message({
type: 'info',
message: message
})
return
}
// this.isAddButton = true
// 新增一條對(duì)象
const AddObj={
intentionName: '',
isEdit: true,
isAdd: true
}
// 添加到這個(gè)表格里面去
this.tableData.push(AddObj)
},這是點(diǎn)擊新增或者編輯的時(shí)候的按鈕狀態(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: '',
// 新增遠(yuǎn)程搜索
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 = '請(qǐng)先保存或取消您正在新增的數(shù)據(jù)'
flag = false
return
}
if (item.isEdit) {
message = '請(qǐng)先保存或取消您正在編輯的數(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
},取消的時(shí)候，就判斷是新增還是編輯
// 取消
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ìn)行操作
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家學(xué)習(xí)介紹了如何利用Vue2實(shí)現(xiàn)全局水印的效果，文中的示例代碼簡(jiǎn)潔易懂，具有一定的借鑒價(jià)值，感興趣的小伙伴可以了解下2023-07-07
vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程
這篇文章主要介紹了vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了如何vue中添加音頻和視頻的相關(guān)知識(shí),文中的示例代碼簡(jiǎn)潔易懂,具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解下2023-08-08
這篇文章主要介紹了詳解vue項(xiàng)目接入微信JSSDK的坑,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了Vue 根據(jù)條件判斷van-tab的顯示方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
在當(dāng)今前端開發(fā)領(lǐng)域,首屏加載速度和 SEO 優(yōu)化已成為衡量 Web 應(yīng)用質(zhì)量的重要指標(biāo),Vue3服務(wù)端渲染為解決這些問題提供了優(yōu)雅的解決方案,下面小編就來和大家詳細(xì)講講吧2025-05-05
這篇文章主要介紹了Vue.use源碼學(xué)習(xí)小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
Vue基于el-breadcrumb實(shí)現(xiàn)面包屑功能(操作代碼)
這篇文章主要介紹了Vue基于el-breadcrumb實(shí)現(xiàn)面包屑功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
使用Vue簡(jiǎn)單實(shí)現(xiàn)一個(gè)上拉加載更多分頁組件
上拉加載更多的分頁功能大家應(yīng)該都見過或者使用過了吧,那么有多少同學(xué)自己實(shí)現(xiàn)過嗎,本文我們來簡(jiǎn)單實(shí)現(xiàn)一個(gè)上拉加載更多分頁組件吧2024-11-11
vue2.0 與 bootstrap datetimepicker的結(jié)合使用實(shí)例
本篇文章主要介紹了vue2.0 與 bootstrap datetimepicker的結(jié)合使用實(shí)例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05