fast-crud请求后调用刷新方法

懒洋洋懒羊羊

已于 2024-07-05 09:45:12 修改

阅读量774

点赞数

文章标签： vue.js

于 2023-07-10 10:07:27 首次发布

本文链接：https://blog.youkuaiyun.com/m0_45827438/article/details/131632700

版权

本文介绍如何在Vue.js应用程序中，完成CRUD操作后调用刷新方法，确保组件数据的实时更新。具体是在crud.jsx文件中进行相关操作，然后在index.vue组件中进行响应式的数据刷新处理。

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

在crud.jsx中

export default function ({ expose, distribution }) {
      const oneClickActivation = () => {
    allActivation(selectedRowKeys.value).then(
      () => {
        //刷新方法
         expose.doRefresh();
      }
    );
  }
})

在index.vue中

      import { useExpose, useCrud } from '@fast-crud/fast-crud';
        // 暴露的方法
      const { expose } = useExpose({ crudRef, crudBinding });
      // 你的crud配置
      const { crudOptions } = createCrudOptions({ expose });
            // 初始化crud配置
      // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
      const { resetCrudOptions } = useCrud({ expose, crudOptions });
      const handleMenuClick = (e) => {
        createConfirm({
          iconType: 'warning',
          title: '提示',
          content: '是否批量删除',
          onOk: async () => {
            request({ url: `/authority/opt_logs/${e.key}`,
                     method: 'delete' }).then((ret) => {
              notification.success({
                message: '批量删除成功',
                duration: 3,
              });
               //在此处使用
              expose.doRefresh();
            });
          },
        });
      };