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表格增加的资料请关注脚本之家其它相关文章！
相关文章
如何在Vue中使localStorage具有响应式(思想实验)
这篇文章主要介绍了如何在Vue中使localStorage具有响应式,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
这篇文章主要为大家详细介绍了如何流vue+canvas实现一个简易的九宮格手势解锁器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-09-09
这篇文章主要介绍了Vue之Mixins(混入)的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了如何解决Element UI中NavMenu折叠菜单的坑,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
Ant Design Vue table中列超长显示...并加提示语的实例
这篇文章主要介绍了Ant Design Vue table中列超长显示...并加提示语的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue中响应式布局如何将字体大小改成自适应，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
在基于Vue.js构建的应用程序中,处理日期选择器是一个常见的需求,尤其是在涉及到日期范围的选择时,Vue提供了多种方式来实现日期选择器的功能,并允许我们对这些组件进行高度定制,本文将深入探讨如何在Vue应用中实现DateRange选择器的禁选功能,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了浅谈vux之x-input使用以及源码解读，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要为大家详细介绍了Vue2组件tree实现无限级树形菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
这篇文章主要为大家详细介绍了Vue2.0实现调用摄像头进行拍照功能，以及图片上传功能引用exif.js，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
最新评论