需求描述

在项目中遇到需要实现表格动态的新增、编辑、删除表格行的需求，同时带有校验规则

代码解决

1. 点击新增的时候，给新增row默认属性，给相应的默认值，包括给一个isEditor: true，用来区分是否需要编辑。同时当有编辑行的时候，应当不能新增新的行或者编辑其他行，全局定义一个isHasEdit，用来分辨当下是否有正在编辑的行。

const isHasEdit = ref('1') // 1 默认没有正在编辑的, 0 有正在编辑的row，其他row不能编辑/新增
const addRow = (index: number) => {if(isHasEdit.value == '1') {tableData.value.splice(index + 1, 0, {key: "",value: "",isEditor: true})isHasEdit.value = '0'}
}

2. 当isEditor为true的时候能编辑，表格当中要插入相应需求的el-form-item，通过isEditor判断是否显示

<el-form :model="tableData" ref="tableForm"><div class="btn"><el-button type='primary' link @click='addRow(tableData.length-1)'>新增行</el-button></div><el-table :data="tableData" stripe border header-cell-class-name='x-table-header' cell-class-name='x-table-cell'><el-table-column type="index" width="60" label="序号" align="center"></el-table-column><el-table-column prop="key" label="职级" align="center"><template #default="{row, $index}"><el-form-item v-if="row.isEditor":prop="`${$index}.key`":rules="rules.key"><el-input v-model="row.key" /></el-form-item><span v-else>{{ row.key }}</span></template></el-table-column><el-table-column prop="value" label="金额/天" align="center"><template #default="{row, $index}"><el-form-itemv-if="row.isEditor":prop="`${$index}.value`":rules="rules.value"><el-input v-model="row.value"/></el-form-item><span v-else>{{ row.value }}</span></template></el-table-column><el-table-column label="操作" align="center"><template #default="{row, $index}"><el-button type='primary' v-if="!row.isEditor" text @click="editRow(row, $index)">编辑</el-button><el-button type="primary" v-else text @click="saveRow(row, $index)">保存</el-button><el-button type="danger" text @click="delRow(row.id, $index)">删除</el-button></template></el-table-column></el-table></el-form>

:prop=“${$index}.value” 动态的绑定，确保相应正确校验
3.完整代码

<script lang="tsx" setup>
const tableData = ref<any[]>([])
const isHasEdit = ref('1') // 1 默认没有正在编辑的, 0 有正在编辑的row，其他row不能编辑/新增
const addRow = (index: number) => {if(isHasEdit.value == '1') {tableData.value.splice(index + 1, 0, {key: "",value: "",isEditor: true})isHasEdit.value = '0'}
}const editRow = (row:any, index: number) => {// row.isEditor = true;// tableData.value[index].isEditor = trueif(isHasEdit.value == '1') {tableData.value[index].isEditor = trueisHasEdit.value = '0'}
}
const tableForm = ref();
const rules = ({key: [{ required: true, message: '请输入', trigger: 'blur' }],value: [{ required: true, message: '请输入', trigger: 'blur' }],
})
const saveRow = (row:any, index:number) => {tableForm.value?.validate(async(valid:any) => {if(valid) {row.id ? await updateConfig({...row, type: 0}) : await addConfig({...row, type: 0})tableReset()isHasEdit.value = '1'row.isEditor = false;}})}
const delRow = (id:any, index: number) => {ElMessageBox.confirm('即将删除该职级,是否继续','提示',{confirmButtonText: '确 定',cancelButtonText: '取 消',type: 'warning'}).then(async () => {isHasEdit.value = '1'if(id) { // 已保存(存入数据库)数据的删除await delConfig(id)// tableData.value.splice(index, 1)tableReset()}else { // 新增数据，没有存入数据库的数据删除tableData.value.splice(index, 1)} }).catch(()=>{isHasEdit.value = '0'})
}
</script>
<template>
<div class="tab"><el-form :model="tableData" ref="tableForm"><div class="btn"><el-button type='primary' link @click='addRow(tableData.length-1)'>新增行</el-button></div><el-table :data="tableData" stripe border header-cell-class-name='x-table-header' cell-class-name='x-table-cell'><el-table-column type="index" width="60" label="序号" align="center"></el-table-column><el-table-column prop="key" label="职级" align="center"><template #default="{row, $index}"><el-form-item v-if="row.isEditor":prop="`${$index}.key`":rules="rules.key"><el-input v-model="row.key" /></el-form-item><span v-else>{{ row.key }}</span></template></el-table-column><el-table-column prop="value" label="金额/天" align="center"><template #default="{row, $index}"><el-form-itemv-if="row.isEditor":prop="`${$index}.value`":rules="rules.value"><el-input v-model="row.value"/></el-form-item><span v-else>{{ row.value }}</span></template></el-table-column><el-table-column label="操作" align="center"><template #default="{row, $index}"><el-button type='primary' v-if="!row.isEditor" text @click="editRow(row, $index)">编辑</el-button><el-button type="primary" v-else text @click="saveRow(row, $index)">保存</el-button><el-button type="danger" text @click="delRow(row.id, $index)">删除</el-button></template></el-table-column></el-table></el-form></div>
</template>