avue可以说前端开发的一大利器了。给大家封装了一些非常易用的组件,尤其对于 crud以及 表单的操作。但是封装易用的同时,也会导致一些api不能方便的调用,尤其是多组件嵌套交互的情况下,某些问题处理起来会比较棘手。下面总结几个近期发现的问题,以及我采用的解决方案。仅供参考。
1、 select下拉框,远程可搜索字典,数据回显问题。
实际测试,发现,当远程搜索的时候,回显会导致只显示id,而不能显示名称。此时可以在获取详情后,根据返回的id和name对下拉框进行赋值。就是利用 select cacheOptions 赋值来进行回显
getPropRef(prop) { return this.$refs.form.getPropRef(prop)?.$refs.temp.$refs.main }, getSelectedLabel(label) { return this.getPropRef(label).selectedLabel ?? '' }, showRemoteSelect(propName, label, value) { this.getPropRef(propName).cachedOptions.push({ currentLabel: label, currentValue: value, label, value }) },
2、组件交互问题。
当其中某个组件变化,引导其他组件值跟随变化时,可以通过 control 属性 调用 methods中的方法实现。也可以通过监听对应的属性值的变化进行修改实现。 control属性基本相当于 @input 方法。另外,实测 change等调用方法不能实时变化,需要下一个变化周期才会起作用。
3、表单提交loading问题。 如果需要自行控制loading,可以通过插槽自行编写按钮及其事件。默认的@submit方法,在提交成功或失败后,都会锁定loading状态,对于修改失败或者服务端接口失败的情况很不友好。需要调用回调函数中的done方法才可消除loading状态。
标签:loading,记录,value,label,组件,一些,getPropRef,avue From: https://www.cnblogs.com/aleafo/p/17037744.html