表格新增一行可编辑的空行

最新推荐文章于 2024-08-25 09:57:22 发布

兜小糖的小秃毛

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量156

点赞数

文章标签： vue.js 前端 css javascript

本文链接：https://blog.csdn.net/Roy__Jason/article/details/130847696

版权

文章展示了如何在Vue.js应用中创建一个表格，允许用户编辑区间起点和终点，并提供增加和删除行的功能。表格数据绑定到formData.intervalInfoList，当删除所有行后会自动添加一行空行供用户继续输入。

摘要由CSDN通过智能技术生成

表格新增一行可编辑的空行

<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);
	}
}