表格新增一行可编辑的空行
<div class="interval">
<el-table
ref="tableRef"
:data="formData.intervalInfoList"
highlight-current-row
:header-cell-style="tableHeader">
<el-table-column label="区间起点" align="center">
<template #default="scope">
<el-input v-model="scope.row.age" placeholder="请输入"></el-input>
</template>
</el-table-column>
<el-table-column label="区间终点" align="center">
<template #default="scope">
<el-input v-model="scope.row.name" placeholder="请输入"></el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center">
<template #default="scope">
<span @click="addRow(scope.$index)" class="add-btn">增加</span>
<span class="delete-btn" @click="deleteRow(scope.row, scope.$index)">删除</span>
</template>
</el-table-column>
</el-table>
<div class="confirmBox">
<el-button @click="addRow" size="small">新增一行</el-button>
</div>
</div>
function tableHeader() {
return 'background:#E2E6E9;color:#212121;text-align:center;';
}
function deleteRow(row: any, index: number) {
state.formData.intervalInfoList.splice(index, 1);
if (!state.formData.intervalInfoList.length) {
addRow();
}
}
function addRow(rowIndex?: number) {
const newRow = {
start: '',
end: '',
};
if (typeof rowIndex == 'number') {
state.formData.intervalInfoList.splice(rowIndex + 1, 0, newRow);
} else {
state.formData.intervalInfoList.push(newRow);
}
}