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

背景:最近有个小项目,用了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);
        })
    };
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值