vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue element-plus表格增加

vue使用element-plus依赖实现表格增加的示例代码

作者：程序酷巴戈

这篇文章主要为大家详细介绍了vue使用element-plus依赖实现表格增加,文中示例代码讲解的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

【需求】实现表格增加行数据。

<template>
	<el-table :data="usercases" style="width: 100%" border :key='id'>
		<el-table-column fixed prop="id" label="ID" width="50" />
		<el-table-column prop="name" label="接口名" width="280" />
		<el-table-column prop="tester" label="测试人员" width="120" />
		<el-table-column prop="project" label="项目" width="200" />
		<el-table-column prop="project_id" label="项目ID" width="120" />
		<el-table-column prop="desc" label="描述" width="200" />
		<el-table-column prop="create_time" label="创建时间" width="200" />
		<el-table-column prop="testcases" label="用例数" width="100" />
		<el-table-column fixed="right" label="操作" width="120">
			<template #default="{row}">
				<el-button link type="primary" size="small" @click="deleteButton(row)">删除</el-button>
				<el-button link type="primary" size="small" @click='editCase(row)'>修改</el-button>
			</template>
		</el-table-column>
	</el-table>
 
	<!-- 编辑对话框 -->
	<el-dialog v-model="editDialogVisible" title="编辑案例">
		<el-form v-model="tempcase">
			<el-form-item label="ID" :label-width="formLabelWidth" readonly>
				<el-input v-model="tempcase.id" autocomplete="off" />
			</el-form-item>
			<el-form-item label="接口名" :label-width="formLabelWidth">
				<el-input v-model="tempcase.name" autocomplete="off" />
			</el-form-item>
			<el-form-item label="测试人员" :label-width="formLabelWidth">
				<el-input v-model="tempcase.tester" autocomplete="off" />
			</el-form-item>
			<el-form-item label="项目" :label-width="formLabelWidth">
				<el-input v-model="tempcase.project" autocomplete="off" />
			</el-form-item>
			<el-form-item label="项目ID" :label-width="formLabelWidth">
				<el-input v-model="tempcase.project_id" autocomplete="off" />
			</el-form-item>
			<el-form-item label="描述" :label-width="formLabelWidth">
				<el-input v-model="tempcase.desc" autocomplete="off" />
			</el-form-item>
			<el-form-item label="创建时间" :label-width="formLabelWidth">
				<el-input v-model="tempcase.create_time" autocomplete="off" />
			</el-form-item>
			<el-form-item label="用例数" :label-width="formLabelWidth">
				<el-input v-model="tempcase.testcases" autocomplete="off" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancelSubmit">取消</el-button>
				<el-button type="primary" @click="confirmEdit">确认</el-button>
			</span>
		</template>
	</el-dialog>
</template>
 
<script>
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
 
	export default {
		data() {
			return {
				usercases: [{
						id: 1,
						name: "查看项目列表接口_INlove即时通讯项目",
						tester: "酷巴戈",
						project: "INlove即时通讯项目",
						project_id: 2,
						desc: "",
						create_time: "2023-11-06 17:22:50",
						testcases: 1
					},
					{
						id: 2,
						name: "登录接口_自动化测试平台项目",
						tester: "csdn",
						project: "自动化测试平台项目",
						project_id: 1,
						desc: "登录接口",
						create_time: "2023-12-06 14:50:30",
						testcases: 9
					}
				],
				tempcase: {
					id: null,
					name: "",
					tester: "",
					project: "",
					project_id: null,
					desc: "",
					create_time: "",
					testcases: null
				},
				editDialogVisible: false,
			}
		},
		methods: {
			deleteButton(row) {
				ElMessageBox.confirm(
						'是否确认删除',
						'提醒', {
							confirmButtonText: '确认',
							cancelButtonText: '取消',
							type: 'warning',
						}
					)
					.then(() => {
						this.usercases = this.usercases.filter((item) => item !== row);
						ElMessage({
							type: 'success',
							message: '删除成功',
						})
					})
					.catch(() => {
						ElMessage({
							type: 'info',
							message: '删除取消',
						})
					})
			},
			cancelSubmit(){
				this.editDialogVisible = false;
			},
			editCase(row) {
				// 将编辑用例的对话框设为可见
				this.editDialogVisible = true;
				// 将当前行的数据赋值给 tempcase，这样对话框中的表单就会显示当前行的值
				this.tempcase = {
					...row
				};
			},
			confirmEdit() {
				const index = this.usercases.findIndex((item) => item.id === this.tempcase.id); //能找到就返回正常的索引id，找不到就返回-1
				if (index !== -1) {
					this.usercases.splice(index, 1, {
						...this.tempcase
					});
 
					// 提示编辑成功
					ElMessage.success('编辑成功');
					// 关闭编辑对话框
					this.editDialogVisible = false;
 
				} else {
					ElMessage.error('未找到相应项');
				}
			}
		},
	}
</script>
<style scoped>
	
</style>

【分析需求】

实现增加数据行，那需要准备这些功能：

【处理需求】

1、新增case按钮

按钮很简单，可以直接拿来删除或修改的按钮来用，放在表格上面或下面都行。

<el-button type="primary"  @click="">新增用例</el-button>
<br />	<br />	
<el-table :data="usercases" style="width: 100%" border :key='id'>
	// 其他代码
</el-table>

为了整体美观，可以加个换行。不过要注意的是，这个按钮是放在表格外的。

2、对话框：输入框为空

这个和修改按钮的处理很像。只是修改按钮要求点击的事件能够带出数据，而新增按钮要求点击的事件是不带出事件。仔细一看修改的单击事件指向的方法传递了row值，那新增这块不传递不就可了？

// 在methods中加入方法，并在 按钮的单击事件绑定这个方法@click="addCase"
addCase() {
    this.editDialogVisible = true;
},

3、保存数据

预览效果发现，倒是能弹出对话框了，怎么点击确认，会报错呢？

仔细看代码，可以发现，这个对话框的确认按钮，我们在定义修改用例的时候，已经给它设置了规则。因为不管输入什么内容，index返回的都是-1，在原来的usercases里面找不到id，所以才报错。

confirmEdit() {
	const index = this.usercases.findIndex((item) => item.id === this.tempcase.id); 
	if (index !== -1) {
		this.usercases.splice(index, 1, {
			...this.tempcase
		});
		ElMessage.success('编辑成功');
		this.editDialogVisible = false;
 
	} else {
		ElMessage.error('未找到相应项');
	}
},

因此，我们需要定义一个属于增加用例的【确认按钮】，但在同一个对话框内，显示三个按钮，两个都是提交的，这样显然不太合理。

如果简单地解决，可以使用v-show：

那么，我们需要对这两个按钮也做一个可视化的处理。

// 其他数据
<template #footer>
	<span class="dialog-footer">
		<el-button type="primary" @click="cancelSubmit">
			取消
		</el-button>
		<el-button @click="confirmEdit" v-show="confirmEditVisiable">确认编辑</el-button>
		<el-button @click="confirmAdd" v-show="confirmAddVisiable">提交</el-button>
	</span>
</template>
// 其他数据
<script>
export default {
	data() {
		return {
		// 其他数据
		editDialogVisible: false,
		confirmAddVisiable: false,
		confirmEditVisiable: false,
				}
			},
    methods: {
			// 其他代码
            cancelSubmit() {
				this.editDialogVisible = false; // 取消，不显示对话框
				this.confirmAddVisiable = false; // 不显示确认按钮
				this.confirmEditVisiable = false; // 不显示提交按钮
			},
			editCase(row) {
				this.editDialogVisible = true; // 单击修改按钮，显示对话框，显示确认按钮
				this.confirmEditVisiable = true;
				this.tempcase = {
					...row
				};
            }，
			confirmEdit() {
				const index = this.usercases.findIndex((item) => item.id === this.tempcase.id); 
				if (index !== -1) {
					this.usercases.splice(index, 1, {
						...this.tempcase
					});
					this.confirmEditVisiable = false; // 编辑成功，不显示确认按钮
					ElMessage.success('编辑成功');
					this.editDialogVisible = false;
 
				} else {
					ElMessage.error('未找到相应项'); // 没有将对话框和确认按钮的值修改，则是维持为true的状态
				}
			},
			addCase() {
				this.editDialogVisible = true; // 单击新增按钮，显示对话框，显示提交按钮
				this.confirmAddVisiable = true;  // 因为在上一步的取消中，已经定义确认按钮为false不显示的状态，所以此时不会出现确认和提交并存的状态
			},
			confirmAdd() {
				this.confirmAddVisiable = false; // 提交成功，不显示确认按钮
				this.usercases.push({
					...this.tempcase
				});
				this.editDialogVisible = false;
				ElMessage({
					type: 'success',
					message: '提交成功',
				});
			},
		},
	}
</script>

预览效果可以发现，没有对输入框做校验，导致会生成很多一样的数据，这个肯定是需要修改的。

可以直接在addCase中添加一个基本的校验条件：

confirmAdd() {
	if (this.isValidInput()) {
		// this.updateCurrentTime();
		this.cases.push({
			...this.tempcase
		});
		this.editDialogVisible = false;
		this.confirmAddVisiable = false;
		ElMessage({
			type: 'success',
			message: '提交成功',
		});
	} else {
		ElMessage.error('请检查输入项是否完整！')
	}
},
isValidInput() {
	return (
		this.tempcase.id !== null &&
		this.tempcase.name !== '' &&
		this.tempcase.tester !== '' &&
		this.tempcase.project !== '' &&
		this.tempcase.project_id !== null &&
		this.tempcase.create_time != '' &&
		this.tempcase.testcases !== null
	)
},

一定要注意，this.confirmAddVisiable = false; 要发生在提交成功后，不然就会像这样，对话框还在，但是提交按钮没了。

4、置空对话框

置空对话框很重要，不然会发现，不管是新增还是修改，不论是取消还是确认或提交，只要使用了tempcase，上一次的数据都会残留在对话框内。根据不同需求做不同的处理，然而此处，我们要实现每一次的点击都是新的开始。

我们在前面已经知道，对话框里的数据是来自data中的tempcase，那如果要置空tempcase，就得要有tempcase2号把它的空的值写给tempcase。

第一步：先定义一个tempcase2号，然后赋值给tempcase。

resetTempCase() {
	return this.tempcase = this.getEmptyTempCase()
},
getEmptyTempCase() {
	return {
		id: null,
		name: "",
		tester: "",
		project: "",
		project_id: null,
		desc: "",
		create_time: "",
		testcases: null,
	}
},

第二步：调用置空方法。

在哪里调用呢？很明显，在对话框下一次展示之前就需要置空，也就是在对话框关闭的时候，需要同时清除上一次保存在tempcase中的数据。

<template>
// 其他代码
</template>
 
<script>
	export default {
		// 其他代码
		methods: {
			// 其他代码
			cancelSubmit() {
				// 其他代码
				this.resetTempCase(); // 取消置空tempcase
			},
			confirmEdit() {
				
				if (index !== -1) {
                    // 其他代码
					this.resetTempCase(); // 确认 置空tempcase
				} else {
					ElMessage.error('未找到相应项');
				}
			},
			confirmAdd() {
				this.confirmAddVisiable = false;
				if (this.isValidInput()) {
					// 其他代码
					this.resetTempCase();  // 提交 置空tempcase
				} else {
					ElMessage.error('请检查输入项是否完整！')
				}
			},
			
		},
	}
</script>
<style scoped>
 
</style>

【完整代码】

<template>
 
	<el-button type="primary" @click="addCase">新增用例</el-button>
	<br /> <br />
	<el-table :data="usercases" style="width: 100%" border :key='id'>
		<el-table-column fixed prop="id" label="ID" width="50" />
		<el-table-column prop="name" label="接口名" width="280" />
		<el-table-column prop="tester" label="测试人员" width="120" />
		<el-table-column prop="project" label="项目" width="200" />
		<el-table-column prop="project_id" label="项目ID" width="120" />
		<el-table-column prop="desc" label="描述" width="200" />
		<el-table-column prop="create_time" label="创建时间" width="200" />
		<el-table-column prop="testcases" label="用例数" width="100" />
		<el-table-column fixed="right" label="操作" width="120">
			<template #default="{row}">
				<el-button link type="primary" size="small" @click="deleteButton(row)">删除</el-button>
				<el-button link type="primary" size="small" @click='editCase(row)'>修改</el-button>
			</template>
		</el-table-column>
	</el-table>
 
	<!-- 编辑对话框 -->
	<el-dialog v-model="editDialogVisible" title="编辑案例">
		<el-form v-model="tempcase">
			<el-form-item label="ID" :label-width="formLabelWidth" readonly>
				<el-input v-model="tempcase.id" autocomplete="off" />
			</el-form-item>
			<el-form-item label="接口名" :label-width="formLabelWidth">
				<el-input v-model="tempcase.name" autocomplete="off" />
			</el-form-item>
			<el-form-item label="测试人员" :label-width="formLabelWidth">
				<el-input v-model="tempcase.tester" autocomplete="off" />
			</el-form-item>
			<el-form-item label="项目" :label-width="formLabelWidth">
				<el-input v-model="tempcase.project" autocomplete="off" />
			</el-form-item>
			<el-form-item label="项目ID" :label-width="formLabelWidth">
				<el-input v-model="tempcase.project_id" autocomplete="off" />
			</el-form-item>
			<el-form-item label="描述" :label-width="formLabelWidth">
				<el-input v-model="tempcase.desc" autocomplete="off" />
			</el-form-item>
			<el-form-item label="创建时间" :label-width="formLabelWidth">
				<el-input v-model="tempcase.create_time" autocomplete="off" />
			</el-form-item>
			<el-form-item label="用例数" :label-width="formLabelWidth">
				<el-input v-model="tempcase.testcases" autocomplete="off" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancelSubmit">取消</el-button>
				<el-button type="primary" @click="confirmEdit" v-show='confirmEditVisiable'>确认</el-button>
				<el-button type="primary" @click="confirmAdd" v-show='confirmAddVisiable'>提交</el-button>
			</span>
		</template>
	</el-dialog>
</template>
 
<script>
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
 
	export default {
		data() {
			return {
				usercases: [{
						id: 1,
						name: "查看项目列表接口_INlove即时通讯项目",
						tester: "酷巴戈",
						project: "INlove即时通讯项目",
						project_id: 2,
						desc: "",
						create_time: "2023-11-06 17:22:50",
						testcases: 1
					},
					{
						id: 2,
						name: "登录接口_自动化测试平台项目",
						tester: "csdn",
						project: "自动化测试平台项目",
						project_id: 1,
						desc: "登录接口",
						create_time: "2023-12-06 14:50:30",
						testcases: 9
					}
				],
				tempcase: {
					id: null,
					name: "",
					tester: "",
					project: "",
					project_id: null,
					desc: "",
					create_time: "",
					testcases: null
				},
				editDialogVisible: false,
				confirmAddVisiable: false,
				confirmEditVisiable: false,
			}
		},
		methods: {
			deleteButton(row) {
				ElMessageBox.confirm(
						'是否确认删除',
						'提醒', {
							confirmButtonText: '确认',
							cancelButtonText: '取消',
							type: 'warning',
						}
					)
					.then(() => {
						this.usercases = this.usercases.filter((item) => item !== row);
						ElMessage({
							type: 'success',
							message: '删除成功',
						})
					})
					.catch(() => {
						ElMessage({
							type: 'info',
							message: '删除取消',
						})
					})
			},
			cancelSubmit() {
				this.editDialogVisible = false;
				this.confirmAddVisiable = false;
				this.confirmEditVisiable = false;
				this.resetTempCase();
			},
			editCase(row) {
				this.editDialogVisible = true;
				this.confirmEditVisiable = true;
				this.tempcase = {
					...row
				};
			},
			confirmEdit() {
 
				const index = this.usercases.findIndex((item) => item.id === this.tempcase.id); 
				if (index !== -1) {
					this.usercases.splice(index, 1, {
						...this.tempcase
					});
					this.confirmEditVisiable = false;
					ElMessage.success('编辑成功');
					this.editDialogVisible = false;
					this.resetTempCase();
				} else {
					ElMessage.error('未找到相应项');
				}
			},
			addCase() {
				this.editDialogVisible = true;
				this.confirmAddVisiable = true;
			},
			confirmAdd() {
				this.confirmAddVisiable = false;
				if (this.isValidInput()) {
					
					this.cases.push({
						...this.tempcase
					});
					this.editDialogVisible = false;
					ElMessage({
						type: 'success',
						message: '提交成功',
					});
					this.resetTempCase();
				} else {
					ElMessage.error('请检查输入项是否完整！')
				}
			},
			isValidInput() {
				return (
					this.tempcase.id !== null &&
					this.tempcase.name !== '' &&
					this.tempcase.tester !== '' &&
					this.tempcase.project !== '' &&
					this.tempcase.project_id !== null &&
					// this.tempcase.create_time != '' &&
					this.tempcase.testcases !== null
				)
			},
			resetTempCase() {
				return this.tempcase = this.getEmptyTempCase()
			},
			getEmptyTempCase() {
				return {
					id: null,
					name: "",
					tester: "",
					project: "",
					project_id: null,
					desc: "",
					create_time: "",
					testcases: null,
				}
			},
		},
	}
</script>
<style scoped>
	.el-button--text {
		margin-right: 15px;
	}
	
	.el-select {
		width: 300px;
	}
	
	.el-input {
		width: 300px;
	}
	
	.dialog-footer button:first-child {
		margin-right: 10px;
	}
	
	.demo-datetime-picker {
		display: flex;
		width: 100%;
		padding: 0;
		flex-wrap: wrap;
	}
	
	.demo-datetime-picker .block {
		padding: 30px 0;
		text-align: center;
		border-right: solid 1px var(--el-border-color);
		flex: 1;
	}
	
	.demo-datetime-picker .block:last-child {
		border-right: none;
	}
</style>

以上就是vue使用element-plus依赖实现表格增加的示例代码的详细内容，更多关于vue element-plus表格增加的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文