avue的一些踩坑记录

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状态。需要注意的是，自定义按钮的submit需要手动调用表单的validate方法进行验证。 

4、crud组件，输入框回车搜索问题。 文档是并没有标注，实际上已经具备此功能。 需要在curd的option增加属性 searchEnter: true 即可实现输入内容后回车搜索

5、输入框禁止两侧空格，此功能组件暂未封装，查看源码也确实没有可用的配置。因为本身Vue2也无法支持 动态修饰符的功能，只能通过v-if语法逐个实现。