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