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