美文网首页
elTree和AUpload组件问题

elTree和AUpload组件问题

作者: 绝尘kinoko | 来源:发表于2021-07-16 20:17 被阅读0次

    记录本周改bug遇到的问题,主要是组件层面样式、功能修改。

    • elTree横向滚动条
      一开始盯着elTree根dom改overflow,一点用没有,后来百度到了答案
    .tree-wrapper {
      w & h
      overflow: auto;
      .my-tree {
        display: inline-block;
        min-width: 100%;
      }
    }
    

    原tree是block。

    • lazyLoad的叶节点不显示三角
      原以为是后端返回的children字段是[],但是改为null甚至删除后都没用;又试着改loadNode方法,在最后一级resolve(null)(原来是resolve([])),直接报错了——组件内部会遍历resolve的值,所以只能是数组。最后发现了盲点,一开始我设置了props,将isLeaf映射到后端返回的字段indexType上,但是indexType是0或者1,isLeaf要求的是boolean,我想着隐式转换一下应该也行就没太在意,结果真是这个问题。
    props: {
      isLeaf: data => {
        return !data.indexType
     }
    }
    
    • lazyTree的叶节点双击
      需要绑定叶节点的双击事件,api没有,slot试了也不行,可能跟懒加载有关,待解决。
    • antd upload 自定义上传
      原来做上传都是action写上传接口,但是新公司的模式是上传时先不走接口,表单提交时再一起传,理论上更省服务器空间。但是没有action怎么办呢?上传会失败,失败就有fail样式,手动改颜色还行,但是有个tooltip改不了,所以还是得找别的方法。
      自定义上传customRequest属性,不过文档没说的很清楚,百度了一个比较有用的https://blog.csdn.net/raingrains/article/details/114445830,这个还有进度条的模拟,我这边不需要。但是遇到问题,上传后一直loading,想了很久没懂,乱试试出来了——onSuccess执行需要异步。
    customUpload(opt) {
      queueMicrotask(() => {
        opt.onSuccess('', opt.file)
      })
    }
    

    还有几个不是el和antd的问题

    • li模拟disabled
      用li做的buttonGroup,但是disabled需要模拟,开始只改了样式,颜色、not-allowed这种,后来发现事件还是有效果,要用pointer-event: none;来清除,且此属性会覆盖cursor: not-allowed;
    • vxe-table虚拟列表formatter失效
      因为数据量很大,所以用到了vxe-table,这里还踩了个坑,结论是vFor的key千万不能用遍历的索引!!!
      有个动态格式化的需求,格式化是做出来了,但是只能格式化一部分,就是可视域之外的,能看到的表格行formatter是无效的。内网关系,没有截图。待解决。

    相关文章

      网友评论

          本文标题:elTree和AUpload组件问题

          本文链接:https://www.haomeiwen.com/subject/fzgbpltx.html