jeecg boot 框架学习（3）— 列表编辑页面处理

最新推荐文章于 2025-04-11 12:20:00 发布

魔力化

最新推荐文章于 2025-04-11 12:20:00 发布

阅读量6.5k

点赞数 1

分类专栏： jeecg框架文章标签： jeecgboot ant desgin vue

本文链接：https://blog.youkuaiyun.com/zhangzhenisme/article/details/100116877

版权

6 篇文章

订阅专栏

本文介绍如何在操作列中通过定义插槽来添加编辑按钮，包括组件的导入、调用方式，以及如何在编辑页面中调用mixins中的handleEdit函数实现编辑功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用插槽给操作列添加编辑按钮
定义插槽slot
<span slot="action" slot-scope="text, record"> <a>编辑</a> </span>
column中添加操作列定义,并绑定插槽
{ title: '操作', dataIndex: 'action', scopedSlots: {customRender: 'action'}, align: "center", width: 170 }
编写编辑页面组件

列表页面导入组件

import UserModal from './system/modules/UserModal'

调用组件
```
<userModal ref="modalForm" @ok="modalFormOk"></userModal>
```
常见组件调用方式（导入名称UserModal为例）：
1、直接使用导入时名称如：UserModal,
2、首单词首字母小写，其他单词首字母大写：userModal
3、首单词大写或者全部小写，多个单词使用-连接：User-Modal 、user-modal
ref 指定ref组件，方便页面其他组件调用
@ok 指定ok函数
编辑页面click调用mixins中的handleEdit函数并将当前行的值传入
<a @click="handleEdit(record)">编辑</a>
点击编辑，handleEdit函数调用UserModal中的edit函数