Arco Design Vue初探——表格可扩展、模态框嵌套表单确定前处理记录

最新推荐文章于 2025-04-10 16:39:34 发布

我不瘦但很逗

最新推荐文章于 2025-04-10 16:39:34 发布

阅读量3.9k

点赞数 2

分类专栏：前端Vue 文章标签： vue.js arco design javascript

本文链接：https://blog.youkuaiyun.com/qq_32944491/article/details/128340296

版权

前端Vue 专栏收录该内容

16 篇文章

订阅专栏

背景：最近有个小项目，用了Arco Design Vue 来实现的；体验感总体组件功能还是蛮强大的不过文档还是不太详细，一些设置我觉得不理解就想Modal中@ok 在我看来这个事件就是多余的，不知道为什么有这个设计；
依赖版本：
@arco-design/web-vue: “^2.37.4”；
vue: “^3.2.41”,

一.表格可扩展自定义，用JSX或者h 函数解决；

官网可扩展例子

在这里插入图片描述

官网的例子过于简单，实现复杂的例子还是需要用JSX 或者函数h 来实现；
具体教程
实际应用效果：

//用的h 函数来实现的；
import { reactive,h} from 'vue';
  const expandable = reactive({
      title: '',
      width: 36,
      expandedRowRender: (record) => {
        if (record.config && Object.keys(record.config).length > 0) {
          res.value = []
          for (let item in record?.config) {
            let obj = {}
            obj.label = item,
            obj.value = record.config[item]
            record.config && res.value.push(obj)
          }
          return h(Descriptions, {
            data: res.value, column: 4, title: '配置', bordered: true
          })
        }
      }
    });

二.模态框a-modal嵌套a-form,使用确认事件@ok校验逻辑不走直接关闭模态框，将@ok 更改为@before-ok 事件

在这里插入图片描述

官网解释：@ok 就是modal 确认按钮的默认事件，你调用则modal就会关闭，所以表单校验成功与否都会关闭；

//主要代码实现如下：
    const handleBeforeOk = (done: (closed: boolean) => void) => {
      formRef.value.validate()
        .then(async (res: any) => {
          if (!res) {
            try {
            } catch (e) { }
          }
          done(!res ? true : false);
        })
        .catch((error: any) => {
          done(false);
        })
    };