【案例】如何实现表格的增加(使用element-plus依赖)

【需求】继上一篇文章,如何实现表格的删除、修改(使用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: 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值