drawer新增或者编辑数据后如何刷新table(表格)

drawer不是有onOk\onClose之类的事件么，可以绑定一个函数刷新表格的数据源

在Drawer中新增或编辑数据后刷新表格，您可以考虑以下两种方法：

方法一：使用事件总线（Event Bus）

• 在Drawer的保存按钮点击事件中，通过事件总线发送一个事件，通知表格组件进行数据刷新。
• 在表格组件中订阅这个事件，并在接收到事件时重新加载列表数据。

具体步骤如下：

1. 在Vue.js中使用一个全局的事件总线，可以使用Vue实例作为事件总线。在main.js中添加以下代码：

   // main.js
   Vue.prototype.$bus = new Vue();
   

2. 在Drawer组件中的保存按钮点击事件中，发送一个自定义事件：

   // Drawer组件
   this.$bus.$emit('refresh-table');
   

3. 在表格组件中监听这个自定义事件，并在接收到事件时重新加载列表数据：

   // 表格组件
   mounted() {
   this.$bus.$on('refresh-table', () => {
    this.loadData(); // 重新加载表格数据的方法
   });
   },
   beforeDestroy() {
   this.$bus.$off('refresh-table'); // 取消事件监听以避免内存泄漏
   }
   

方法二：使用父子组件通信

• 在父组件中包含列表和Drawer组件，在父组件中维护列表数据，并通过props将数据传递给表格组件和Drawer组件。
• 在Drawer组件中，修改或新增数据后，通过回调函数将修改后的数据传递给父组件。父组件接收到数据后更新列表数据。
• 父组件在接收到Drawer组件传递的数据后，会触发子组件（表格组件）的props值变化，进而重新渲染表格显示最新数据。

Drawer 组件的使用场景：

需要给用户一个提示；

需要用户进行确认操作；

需要用户处理事务，又不希望跳转页面以致打断工作流程。

Drawer 组件的基本使用方法：

1 、拖动 Drawer 组件到自定义页面中，并在属性中配置 Drawer 组件的样式 。

自定义页面

2、 Drawer 组件默认是隐藏的，可以通过以下 API 显示 Drawer

export function showDrawer() {   this.$('drawer1').show(); }

举例：

给按钮组件添加点击事件，点击按钮时显示 Drawer 组件。

3 、可以通过配置属性中的高宽来控制 Drawer 的大小，并且可以控制组件的弹出位置以及退出方式。

如图所示：

4、 可以通过配置底部按钮来配置按钮的位置、排列、内容以及动作事件。

如图所示：

Drawer 抽屉何时使用：

抽屉是用于在不离开主路径的情况下，提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。

Drawer 组件默认是隐藏的，可以通过以下 API 显示 Drawer。

export function showDrawer() {   this.$('drawer1').show(); }