el-table行內(nèi)編輯情況情況概要：之前在開發(fā)過程中對于element數(shù)據(jù)的新增，修改，刪除。一般直接結(jié)合el-form使用。也就是新增的時候點(diǎn)新增然后出來一個彈框，里面嵌套一個表單，然后保存就好了。這次項目中要求所有的新增，修改，刪除功能加在表格中，實現(xiàn)行內(nèi)編輯功能。下面看一下大概效果
1.點(diǎn)擊新增按鈕，表格下方多出一行，可以進(jìn)行編輯，確認(rèn)時需要進(jìn)行必填校驗，取消時，該行直接刪除掉：
2.已經(jīng)點(diǎn)擊確認(rèn)的數(shù)據(jù)，如果需要修改的話，可以點(diǎn)擊編輯按鈕進(jìn)行行內(nèi)修改，點(diǎn)擊取消的話，數(shù)據(jù)恢復(fù)原樣：
在這里進(jìn)行的取消一共要考慮到兩個問題，如果是已經(jīng)保存到數(shù)據(jù)庫的數(shù)據(jù)在進(jìn)行編輯后又取消時，數(shù)據(jù)不應(yīng)該刪除掉，而是恢復(fù)之前的狀態(tài)。如果是新增的數(shù)據(jù)沒有保存到數(shù)據(jù)庫中的那么可以直接將其從表格清除。
調(diào)用接口也要考慮到兩種方案：
簡單的方案：在點(diǎn)擊確認(rèn)和刪除時直接調(diào)用接口進(jìn)行數(shù)據(jù)傳遞（這種適用于一次就修改當(dāng)前行一條數(shù)據(jù)，直接在點(diǎn)擊確認(rèn)，刪除時調(diào)用對應(yīng)接口就行了。這種就不寫了）。
較難的方案：表格下方添加一個保存按鈕（圖上沒截圖，自己加一下）。確認(rèn)，取消，編輯，刪除的數(shù)據(jù)都由前端自己記錄，定義一個字段deletedFlag來判斷數(shù)據(jù)狀態(tài)，1則不刪除，0為需要刪除的數(shù)據(jù)，最后點(diǎn)保存的時候，直接將整個表格數(shù)據(jù)返回給后端。后端再根據(jù)deletedFlag來判斷數(shù)據(jù)庫中要保存哪些數(shù)據(jù)。文章來源：http://www.zghlxwxcb.cn/news/detail-553093.html
行內(nèi)編輯代碼簡單展示：文章來源地址http://www.zghlxwxcb.cn/news/detail-553093.html
// 要想表格行內(nèi)編輯，則表單嵌套表格
<template>
<div>
<el-form ref="form" :model="form" :rules="formRule">
<el-table :data="form.tableData" border stripe>
// 序號
<el-table-column type="index" label="序號" align="center" width="50"></el-table-column>
//有必填校驗的加 :rules、el-form-item ，scope.row.show控制當(dāng)前行是否為可編輯狀態(tài)
<el-table-column prop="prop" label="管控措施" align="center">
//作用域插槽
<template slot-scope="scope">
<div style="margin-top:18px">
<el-form-item :prop="`tableData.${scope.$index}.measure`" :rules="formRule.measure">
<el-input v-model="scope.row.measure" size="mini" placeholder="請輸入內(nèi)容" v-show="scope.row.show" maxlength="500" />
<span v-show="!scope.row.show">{{ scope.row.measure }}</span>
</el-form-item>
</div>
</template>
</el-table-column>
// 無必填校驗寫法
<el-table-column prop="prop" label="創(chuàng)建時間" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.createTime" size="mini" placeholder="請輸入內(nèi)容" v-show="scope.row.show" />
<span v-show="!scope.row.show">{{ scope.row.createTime }}</span>
</template>
</el-table-column>
// 操作列
<el-table-column prop="" label="操作" align="center" min-width="80">
<template slot-scope="scope">
<div class="deomDiv">
<div size="mini" v-if="scope.row.state == 0" @click="handleClick(scope.$index, scope.row, '確定')">確定</div>
<div size="mini" v-if="scope.row.state == 0" @click="handleClick(scope.$index, scope.row, '取消')">取消</div>
<div size="mini" v-if="scope.row.state != 0" @click="handleClick(scope.$index, scope.row, '編輯')">編輯</div>
<div size="mini" v-if="scope.row.state != 0" @click="handleClick(scope.$index, scope.row, '刪除')">刪除</div>
</div>
</template>
</el-table-column>
</el-table>
<el-button @click="saveClick">保存</el-button>
</form>
</div>
</template>
<script>
import {
saveEvalue,
} from '@/api/common' // 表格保存接口
export default {
data() {
return {
form:{
tableData: [], //雙向綁定的表格（）
},
tableData：[], // 儲存后端給的初始表格
formRule: {
measure: [{ required: true, message: '請輸入', trigger: 'blur' }],
}
},
methods: {
// 表格內(nèi)嵌表單單條校驗
validateField(form, index) {
let result = true;
for (let item of this.$refs[form].fields) {
if(item.prop.split(".")[1] == index){
this.$refs[form].validateField(item.prop, err => {
if(err != "") {
result = false;
}
});
}
if(!result) break;
}
return result;
},
// 添加行
addLine() {
this.form.tableData.push({
measure: '',
createTime: '',
state: 0, // 0時顯示確認(rèn)、取消，1時顯示編輯、刪除
show: true, // true為編輯狀態(tài)，false為表格行狀態(tài)
})
},
// 操作
handleClick(index, row, type) {
switch (type) {
case '確定':
if (!this.validateField('form',index)) return // 必填校驗
row.show = false // 點(diǎn)擊確定后，該行變?yōu)椴豢删庉嫚顟B(tài)
row.state = 1 // 操作列變?yōu)榫庉?、刪除
break
// 取消時，已保存過的數(shù)據(jù)恢復(fù)原樣，未保存的數(shù)據(jù)直接清空
case '取消':
// 假設(shè)存在數(shù)據(jù)庫里的數(shù)據(jù)有的唯一標(biāo)識id，若該行無id,則表示數(shù)據(jù)庫未曾保存過，點(diǎn)擊取消前端直接刪除該數(shù)據(jù)
if (row.id == undefined) {
this.form.tableData.splice(index, 1)
// 數(shù)據(jù)庫中有該數(shù)據(jù)，恢復(fù)到未修改前的狀態(tài)
} else {
row.show = false
row.state = 1
this.tableData.forEach(item => {
if(item.id == row.id) {
row.measure = item.measure
row.createTime = item.createTime
}
})
}
break
case '編輯':
console.log("當(dāng)前是編輯操作", row);
row.show = true
row.state = 0
break
case '刪除':
this.$confirm('確定刪除?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.form.tableData.splice(index, 1)
})
break
},
// 數(shù)組1在數(shù)組2中查找自己不存在的數(shù)據(jù)，并返回查找鍵值組成的數(shù)組
filterArr(arr1, arr2) {
var key1=[]
var key2=[]
for(var i in arr1){
key1.push( arr1[i].id)
}
for(var i in arr2){
key2.push( arr2[i].id)
}
const arr = [...key1,...key2];
const newArr = arr.filter(item => {
return !(key1.includes(item) && key2.includes(item));
});
return newArr;
},
saveClick() {
// flag為true,整個表格的數(shù)據(jù)都已點(diǎn)擊確認(rèn)為不可編輯狀態(tài)了。flag為false,表格數(shù)據(jù)還有沒保存的。
let flag = true
// 表格數(shù)組長度不為0，說明內(nèi)部可能存在狀態(tài)為1是之前保存過的數(shù)據(jù) 2新添加的數(shù)據(jù) 3以被刪除的數(shù)據(jù)
if (this.form.tableData.length != 0) {
// 如果表格有數(shù)據(jù)沒保存，flag為false
this.form.tableData.forEach(item => {
if (item.show == true) {
flag = false
}
})
if (!flag) {
this.$message.warning("請確認(rèn)列表信息")
} else {
// 表格數(shù)據(jù)都已確認(rèn)可以保存
let arr = [] // 之前存在的（也就是已經(jīng)存入數(shù)據(jù)庫當(dāng)中的）
let arr1 = [] // 被新增的（還未進(jìn)入數(shù)據(jù)庫）
let arr2 = [] // 被刪除的（已經(jīng)進(jìn)入數(shù)據(jù)庫但是被刪除的）
// 表格實時數(shù)據(jù)區(qū)分
this.form.tableData.forEach(item => {
if (item.id) {
// 之前存在的
arr.push(item)
} else {
// 新增的
arr1.push(item)
}
})
// 初始表格數(shù)據(jù) 與 目前表格 中已保存的數(shù)據(jù)對比
// 返回被刪除數(shù)據(jù)的id
let m = this.filterArr(arr, this.tableData)
// 被刪除數(shù)據(jù)形成數(shù)組(被刪除的數(shù)據(jù)在初始表格中)
this.tableData.forEach(item => {
m.forEach(val => {
if (item.id == val) {
// deletedFlag
item.deletedFlag = 0
arr2.push(item)
}
})
})
console.log("之前存在的", arr);
console.log("被新增的", arr1);
console.log("被刪除的", arr2);
// 三個類型拼接一起
let allArr = arr.concat(arr1).concat(arr2)
// 前端自用的show,state不傳給后端
allArr.forEach(item => {
delete item.show
delete item.state
})
// 保存接口
saveEvalue(allArr).then(res => {
if (res.code == 200) {
this.$message.success(res.msg)
} else {
this.$message.warning(res.errorMsg)
}
})
}
// 如果當(dāng)前表格數(shù)據(jù)長度為空
} else {
this.$confirm('未添加任何數(shù)據(jù)?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 初始表格數(shù)據(jù)不為空，則數(shù)據(jù)全部刪除
if (this.tableData.length != 0) {
this.tableData.forEach(item => {
item.deletedFlag = 0
delete item.show
delete item.state
})
saveEvalue(this.tableData).then(res => {
if (res.code == 200) {
this.$message.success(res.msg)
} else {
this.$message.warning(res.errorMsg)
}
})
// 初始表格數(shù)據(jù)為空，實時表格數(shù)據(jù)也為空，直接傳個空數(shù)據(jù)
} else {
saveEvalue([]).then(res => {
if (res.code == 200) {
this.$message.success(res.msg)
} else {
this.$message.warning(res.errorMsg)
}
})
}
}).catch((e) => {
if(e==='close'){
}else if(e==='cancel'){
}
});
}
}
}
</script>
到了這里，關(guān)于Vue+element實現(xiàn)el-table行內(nèi)編輯并校驗的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
