el-table可编辑，加校验
一、点击保存对整个table校验
<template>
<div>
<el-button type="success" @click="handleAdd()">添加一条数据</el-button>
<el-form :model="ruleForm" ref="ruleForm">
<el-table :data="ruleForm.tableData" style="width: 100%">
<el-table-column
v-for="(item, index) in ruleForm.tableHeader"
:prop="item.keys"
:label="item.label"
:key="index"
>
<template slot-scope="scope">
<span v-if="scope.row.isSet">
<el-form-item
:prop="'tableData.' + scope.$index + '.' + item.keys"
:rules="{
required: true,
message: '值不能为空',
trigger: 'blur',
}"
>
<el-input v-model="scope.row[item.keys]"></el-input>
</el-form-item>
</span>
<span v-else>
{{ scope.row[item.keys] }}
</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
v-if="scope.row.isSet"
type="success"
@click="handleSave('ruleForm', scope.$index, scope.row)"
>
保存
</el-button>
<el-button
v-else
type="primary"
@click="handleEdit(scope.$index, scope.row)"
>
编辑
</el-button>
<el-button
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
tableHeader: [
{
label: "日期",
keys: "date",
},
{
label: "姓名",
keys: "name",
},
{
label: "地址",
keys: "address",
},
],
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
},
};
},
methods: {
handleAdd() {
let row = {};
this.ruleForm.tableHeader.forEach((item, index) => {
row.isSet = true;
});
this.ruleForm.tableData.push(row);
},
handleEdit(index, row) {
row.isSet = true;
this.$set(this.ruleForm.tableData, index, row);
},
handleSave(ruleForm, index, row) {
this.$refs[ruleForm].validate((valid) => {
if (valid) {
row.isSet = false;
this.$set(this.ruleForm.tableData, index, row);
} else {
return false;
}
});
},
handleDelete(index, row) {
this.ruleForm.tableData.splice(index, 1);
},
},
};
</script>
<style>
</style>
二、点击确定对每一行el-table校验
<template>
<div class="formData">
<el-table :data="list" style="width: 100%">
<el-table-column prop="key" label="键" min-width="180">
<template slot-scope="{ row }">
<div v-if="!row.isModified">
{{ row.key }}
</div>
<el-form
v-else
:ref="'keyForm' + row.id"
label-width="0px"
:class="row.isKeyValid || row.isValueValid ? 'demo-ruleForm' : ''"
:model="row"
>
<el-form-item
prop="key"
:rules="[
{
validator: validateKey,
trigger: ['blur', 'change'],
id: row.id,
},
]"
>
<el-input v-model="row.key" placeholder="请输入内容"></el-input>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column prop="value" label="值" min-width="180">
<template slot-scope="{ row }">
<div v-if="!row.isModified">
{{ row.value }}
</div>
<el-form
:ref="'valueForm' + row.id"
label-width="0px"
:class="row.isKeyValid || row.isValueValid ? 'demo-ruleForm' : ''"
v-else
:model="row"
>
<el-form-item
prop="value"
:rules="[
{
validator: validateValue,
trigger: ['blur', 'change'],
id: row.id,
},
]"
>
<el-input v-model="row.value" placeholder="请输入内容"></el-input>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="{ row }">
<div v-if="!row.isModified">
<el-button type="text" size="small" @click="deleteKey(row.id)">
删除
</el-button>
<el-button type="text" size="small" @click="editKey(row.id)">
编辑
</el-button>
</div>
<div v-else>
<el-button type="text" size="small" @click="confirm(row.id)">
确认
</el-button>
<el-button type="text" size="small" @click="cancel(row.id)">
取消
</el-button>
</div>
</template>
</el-table-column>
</el-table>
<el-button @click="addKey">增加</el-button>
</div>
</template>
<script>
export default {
name: "formData",
data() {
return {
list: [
{
key: "vue",
value: "2.21",
isModified: false,
isKeyValid: false,
isValueValid: false,
id: 0,
},
{
key: "react",
value: "16.2",
isModified: false,
isKeyValid: false,
isValueValid: false,
id: 1,
},
],
};
},
computed: {
existKeys() {
//过滤出已经存在的key
return this.list
.filter((item) => !item.isModified)
.map((item) => item.key);
},
existValues() {
//过滤出已经存在的value
return this.list
.filter((item) => !item.isModified)
.map((item) => item.value);
},
},
methods: {
deleteKey(index) {
this.list.splice(index, 1);
},
editKey(index) {
this.list[index].isModified = true;
},
addKey() {
this.list.push({
key: "",
value: "",
isModified: true, //切换编辑状态的标志位
isKeyValid: false, //判断Key的校验结果
isValueValid: false, //判断value的校验结果
id: this.list.length,
});
},
promiseValidate(key) {
return new Promise((resolve, reject) => {
try {
this.$refs[key].validate((isValid) => {
resolve(isValid);
});
} catch (err) {
reject(err);
}
});
},
async confirm(index) {
const validates = await Promise.all([
this.promiseValidate("keyForm" + index),
this.promiseValidate("valueForm" + index),
]);
if (validates.every((item) => item)) {
this.list[index].isModified = false;
}
},
validateKey(rule, value, callback) {
if (value === "") {
this.list[rule.id].isKeyValid = true;
callback(new Error("请输入Key"));
} else if (this.existKeys.includes(value)) {
this.list[rule.id].isKeyValid = true;
callback(new Error("Key的值已经重复"));
} else {
callback();
}
},
validateValue(rule, value, callback) {
if (value === "") {
this.list[rule.id].isValueValid = true;
callback(new Error("请输入Value"));
} else if (this.existValues.includes(value)) {
this.list[rule.id].isValueValid = true;
callback(new Error("value的值已经重复"));
} else {
callback();
}
},
},
};
</script>
<style>
.formData {
padding: 20px;
}
.el-form-item {
margin-bottom: 0;
}
.demo-ruleForm {
margin: 20px 0;
}
</style>
