需求描述
在项目中遇到需要实现表格动态的新增、编辑、删除表格行的需求，同时带有校验规则
代码解决
- 点击新增的时候，给新增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'
}
}
- 当
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-item
v-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 = true
if(isHasEdit.value == '1') {
tableData.value[index].isEditor = true
isHasEdit.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-item
v-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>
