1200字范文 > P18-Vue3后台管理系统-用户管理界面-表格编辑和删除操作

P18-Vue3后台管理系统-用户管理界面-表格编辑和删除操作

时间：2022-04-11 09:52:10

1.概述

这篇文章介绍用户管理界面表格的编辑和删除操作。

2.编辑操作实现

monTable向父组件发送操作事件

2.2.UserManage父组件接收子组件事件

2.3.父组件输出操作表格的行数据

3.封装弹出框组件

当在表格上点击编辑后，需要弹出一个form表单的弹出框来修改数据。下面封装这个弹出框组件实现编辑功能。

3.1.查看Element官网提供弹框组件

3.2.创建dialog弹窗

在UserManage组件创建dialog弹窗结构。

在弹窗中添加form表单

form表单操作数据

// 编辑表格内容的form表单数据operateForm: {// 更新表格字段名字name: '',addr: '',age: '',birth: '',sex: ''},operateFormLabel: [{model: 'name',label: '姓名'},{model: 'age',label: '年龄'},{model: 'sex',label: '性别',type: 'select',opts: [{label: '男',value: 1},{label: '女',value: 0}]},{model: 'birth',label: '出生日期',type: 'date'},{model: 'addr',label: '地址'}],

monForm表单组件添加日期选择器

在上面编辑表单中operateFormLabel数据对象model为birth设置的类型是date类型，所以我们要在CommonForm表单组件中添加一个日期选择器支持他的编辑日期时候可以通过时间选择器选择时间。

使用Element提供的默认的日期选择组件

CommonForm组件添加日期选择控件

3.4.设置表单弹窗显示时机

设置弹窗表单在点击表格编辑时候显示，其他情况不显示

添加弹窗是否显示属性

设置编辑时候显示弹窗表单

设置CommonForm组件显示Label

3.5.表单弹窗效果

3.6.表单弹窗添加操作按钮

Element官网提供的Dialog对话框控件，操作按钮使用是插槽形式，我们只要复用这个插槽即可。

应用到UserManage组件

3.8.弹窗操作按钮绑定事件

绑定取消事件

绑定确定事件

查看确定事件输出内容

完善确定事件

3.9.表单弹窗操作按钮效果

3.10.表格删除操作事件

CommonTable子组件向父组件发送删除事件

UserManage父组件输出删除事件数据

控制台输出了删除表格事件数据

添加删除提示弹框

调用删除接口完成删除操作

3.11.表格删除用户效果

4.表格编辑和删除完整代码

4.1.UserManage组件完整代码

<template><div class="manage"><el-dialog :title="operateType === 'add' ? '新增用户' : '更新用户'" :visible.sync="isShow"><common-form :formLabel="operateFormLabel" :form="operateForm"></common-form><div slot="footer" class="dialog-footer"><el-button @click="isShow = false">取消</el-button><el-button type="primary" @click="confirm">确定</el-button></div></el-dialog><div class="manage-header"><el-button type="primary">+ 新建</el-button><common-form inline :formLabel="formLabel" :form="searchForm"><el-button type="primary">搜索</el-button></common-form></div><common-table :tableData="tableData" :tableLabel="tableLabel" :config="config" @changePage="getList()" @edit="editUser" @del="delUser"></common-table></div></template><script>// 导入子组件import CommonForm from '../../components/CommonForm'import CommonTable from '../../components/CommonTable'export default {components: {// 注册子组件CommonForm,CommonTable},data() {return {// 设置弹窗表单操作类型默认是新增表格，当点击编辑时候修改操作类型operateType: 'add',// 设置弹窗表单默认不显示isShow: false,// table表格数据tableData: [],// 表格列名tableLabel: [{// prop属性来对应对象中的键名即可填入数据prop: 'name',// 表格列名称label: '姓名'},{prop: 'age',label: '年龄'},{prop: 'sexLabel',label: '性别'},{prop: 'birth',label: '出生日期',width: 200},{prop: 'addr',label: '地址',width: 520}],// 表格配置信息config: {page: 1,total: 30,loading: false},// 编辑表格内容的form表单数据operateForm: {// 更新表格字段名字name: '',addr: '',age: '',birth: '',sex: ''},operateFormLabel: [{model: 'name',label: '姓名'},{model: 'age',label: '年龄'},{model: 'sex',label: '性别',type: 'select',opts: [{label: '男',value: 1},{label: '女',value: 0}]},{model: 'birth',label: '出生日期',type: 'date'},{model: 'addr',label: '地址'}],// form表单数据searchForm: {keyword: ''},formLabel: [{model: 'keyword',label: ''}]}},methods: {// 请求table表格数据getList() {this.config.loading = truethis.$http.get('/api/user/getUser', {params: {page: this.config.page}}).then(res => {// 请求接口返回的数据赋值给tableDatathis.tableData = res.data.list.map(item => {item.sexLabel = item.sex === 0 ? '女' : '男'return item})this.config.total = res.data.countthis.config.loading = false})},// 编辑table表格方法editUser(row) {// 设置表单弹窗类型为编辑this.operateType = 'edit'// 编辑时候显示表单弹窗this.isShow = true// 将子组件表格内容传入父组件表单this.operateForm = row// 父组件输出子组件发送编辑表格事件的行数据console.log(row)},delUser(row) {// 插入MessageBox弹框控件this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {// 1.请求删除接口，将id作为参数传给接口。删除数据let id = row.idthis.$http.get('/api/user/del', {params: {id}})// 2.处理删除接口返回的数据.then(res => {console.log(res.data)this.$message({type: 'success',message: '删除成功!'})// 3.删除接口请求完成后，刷新表格数据this.getList()})}).catch(() => {this.$message({type: 'info',message: '已取消删除'})})// 输出子组件发送的删除表格数据事件console.log(row)},// 提交编辑table表格方法confirm() {// 根据当前的操作类型判断调用的接口，如果是edit调用编辑接口，add调用新增接口if (this.operateType === 'edit') {// 发送post请求，this.operateForm是请求的参数。this.$http.post('/api/user/edit', this.operateForm).then(res => {// 输出编辑接口返回数据console.log(res.data)// 点击确定后关闭表单弹窗this.isShow = false// 刷新table表格获取新的数据this.getList()})}}// 打印子组件传递当前的页数/* changePage(val) {console.log(val)}*/},// 调用请求表格数据方法created() {this.getList()}}</script><style lang="scss" scoped>@import '@/assets/scss/userManage';</style>

monTable组件完整代码

<template><div class="common-table"><el-table :data="tableData" height="90%" stripe v-loading="config.loading"><el-table-column label="序号" width="85"><template slot-scope="scope"><span style="margin-left: 10px">{{ (config.page - 1) * 20 + scope.$index + 1 }}</span></template></el-table-column><el-table-column v-for="item in tableLabel" :key="item.prop" :label="item.label" show-overflow-tooltip :width="item.width ? item.width : 125"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row[item.prop] }}</span></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table><el-pagination class="pager" layout="prev, pager, next" :total="config.total" :current-page.sync="config.page" @current-change="changePage"></el-pagination></div></template><script>export default {// 接收父组件传来的数据props: {tableData: Array,tableLabel: Array,config: Object},methods: {// ---表格操作列方法---// 向父组件传入编辑事件handleEdit(row) {this.$emit('edit', row)},// 向父组件传递删除事件handleDelete(row) {this.$emit('del', row)},// ---分页操作方法：当改变当前页数时，向父组件发送当前页数changePage(page) {this.$emit('changePage', page)}}}</script><style lang="scss" scoped>.common-table {// 设置表格高度，减去页面header高度height: calc(100% - 62px);// 设置表格背景色background-color: #fff;// 设置相对定位position: relative;// 设置分页样式.pager {position: absolute;bottom: 0;right: 20px;}}</style>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。