vue使用element-plus依赖实现表格增加的示例代码
更新时间：2023年12月22日 11:32:54 作者：程序酷巴戈
这篇文章主要为大家详细介绍了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>【分析需求】
实现增加数据行，那需要准备这些功能：
- 一个新增case的按钮
- 一个对话框，对话框须支持input，且原始输入框为空的
- 单击保存后能保存数据对象到usercases里面
- 再次触发新增case按钮的时候，输入框是空的
【处理需求】
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：
- 从addCase进入的对话框，就显示【提交】
- 从editCase，就显示【确认】
那么，我们需要对这两个按钮也做一个可视化的处理。
// 其他数据
<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表格增加的资料请关注脚本之家其它相关文章！
相关文章
axios请求头设置常见Content-Type和对应参数的处理方式
这篇文章主要介绍了axios请求头设置常见Content-Type和对应参数的处理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了Vue下拉菜单组件化开发过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
VUE2.0自定义指令与v-if冲突导致元素属性修改错位问题及解决方法
这篇文章主要介绍了VUE2.0自定义指令与v-if冲突导致元素属性修改错位问题及解决方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了详解Vue路由自动注入实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了创建Vue项目以及引入Iview的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
一文快速学会阻止事件冒泡的4种方法(原生js阻止,vue中使用修饰符阻止)
冒泡就是事件开始是由最具体的元素接收,然后逐层向上级传播到较为不具体的元素,这篇文章主要给大家介绍了关于阻止事件冒泡的4种方法,文中介绍的方法分别是原生js阻止以及vue中使用修饰符阻止的相关资料,需要的朋友可以参考下2023-12-12
vue中this.$router.go(-1)失效(路由改变了，界面未刷新)
本文主要介绍了vue中this.$router.go(-1)失效(路由改变了,界面未刷新),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-12-12
uniapp如何打包到H5并成功发布,以及在打包过程中会遇到的坑如何解决,本文将一一讲解,文中通过图文结合的方式给大家讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-10-10
.sync修饰符是Vue中用于实现子组件修改父组件传递的props值并更新到父组件的功能,它实际上是一个语法糖,将子组件的props绑定到一个名为update:propName的自定义事件上,本文给大家介绍了vue3中sync修饰符的使用,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了vue实现搜索小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
最新评论