Vue?table新增、編輯解讀
更新時(shí)間：2023年07月28日 17:24:41 作者：貪吃蛇2120
這篇文章主要介紹了Vue?table新增、編輯，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Vue table新增、編輯
需求是這樣的，在一個(gè)表格后面新增一行數(shù)據(jù)，這一行出現(xiàn)一個(gè)表單，通過(guò)表單進(jìn)行編輯
思路是這樣的
- 點(diǎn)擊新增的時(shí)候push一條數(shù)據(jù)，然后再push的時(shí)候加個(gè)狀態(tài)，用來(lá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)文章
這篇文章主要為大家詳細(xì)介紹了vue中bus的相關(guān)使用以及涉及到的問(wèn)題與解決,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起了解一下2023-08-08
vue實(shí)現(xiàn)element-ui對(duì)話框可拖拽功能
這篇文章主要介紹了vue實(shí)現(xiàn)element-ui對(duì)話框可拖拽功能，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
ElementPlus表單rules校驗(yàn)的方法步驟
相信大家經(jīng)常都會(huì)遇到要處理表單驗(yàn)證的環(huán)節(jié),而我在最近的項(xiàng)目中也遇到需要做表單驗(yàn)證的業(yè)務(wù),下面這篇文章主要給大家介紹了關(guān)于ElementPlus表單rules校驗(yàn)的方法步驟,需要的朋友可以參考下2023-04-04
這篇文章主要為大家介紹了vite中使用@配置路徑別名過(guò)程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了vue實(shí)現(xiàn)虛擬化列表封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Element樹(shù)形控件el-tree懶加載并設(shè)置默認(rèn)展開(kāi)和選中的效果
本文主要介紹了Element樹(shù)形控件el-tree懶加載并設(shè)置默認(rèn)展開(kāi)和選中的效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
vue如何解決el-select下拉框顯示ID不顯示label問(wèn)題
這篇文章主要介紹了vue如何解決el-select下拉框顯示ID不顯示label問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue結(jié)合Echarts實(shí)現(xiàn)點(diǎn)擊高亮效果的示例
下面小編就為大家分享一篇vue結(jié)合Echarts實(shí)現(xiàn)點(diǎn)擊高亮效果的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
如何用vue2+element-ui實(shí)現(xiàn)多行行內(nèi)表格編輯
最近開(kāi)發(fā)項(xiàng)目,關(guān)于表格的數(shù)據(jù)操作比較多,這個(gè)地方個(gè)人覺(jué)得比較難搞,特此記錄一下,這篇文章主要給大家介紹了關(guān)于如何用vue2+element-ui實(shí)現(xiàn)多行行內(nèi)表格編輯的相關(guān)資料,需要的朋友可以參考下2024-08-08
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷(xiāo)毀的全過(guò)程,也就是new Vue()開(kāi)始就是vue生命周期的開(kāi)始。Vue實(shí)例有?個(gè)完整的?命周期,也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom->渲染、更新->渲染、卸載等?系列過(guò)程,稱(chēng)這是Vue的?命周期2022-10-10