ElementUI 踩坑

最新推荐文章于 2023-09-09 09:24:44 发布

end-less

最新推荐文章于 2023-09-09 09:24:44 发布

阅读量362

点赞数

分类专栏： Vue 文章标签： vue.js elementui nodejs

本文链接：https://blog.csdn.net/zg97zb/article/details/115958165

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文探讨了前端组件宽度调整时的时间显示问题，提供了解决方案。接着讲述了el-dialog组件复用中内容更新的问题，通过v-if解决了重复请求。最后，分享了Element UI中上传文件的技巧和表单验证的最佳实践。

摘要由CSDN通过智能技术生成

坑1：当组件宽度变小时时间部份被遮挡

解决方法：

.el-input--suffix .el-input__inner {

padding-right: 0px;

}

最后效果：

坑2：el-dialog 打开相同组件内容不更新（弹窗引用相同的组件，根据传值不同弹窗内容不同）没有触发组件生命周期

eg:当我点击按钮A弹出页面A，关闭弹窗点击按钮B 此时还是会显示页面A而不会显示页面B 每次进入页面都会进行网络请求

接着踩坑：

在el-dialog上添加 key 保证弹窗唯一性每次打开都是新的弹窗此时会更新页面A->页面B，但是又产生新的问题每次打开页面都会产生两次网络请求

个人认为应该是旧组件没有被销毁导致新旧组件都进行了网络请求

再踩坑：

接着查资料了解v-if 若为false时组件被销毁于是乎 el-dialog 的visible 配合v-if 就完美解决该问题

坑3:多选设置表单验证规则后弹出表单自动验证

解决方法：使用自定义验证规则然后将这个item关联的字段初始值设置为空数组

ElementUI + axios 上传文件

首先是前端代码

<el-upload
    action
    :show-file-list="false"
    :http-request="submitUpload"
    :before-upload="beforeAvatarUpload" >
      <el-button size="small" type="primary"><i class="el-icon-upload2" /> 
        更换头像
      </el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

...

// script

submitUpload(param) {
      const formData = new FormData()
      formData.set('file', param.file)
      console.log('formData', param.file)
      uploadImage(formData)
    }

上传文件接口封装，注意需要在request里面添加header信息'Content-Type': 'multipart/form-data'

...
// api.js封装上传文件接口
export function uploadImage(data) {
  return request({
    url: '/common/uploadImage',
    method: 'post',
    data: data,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}

后台直接就可以获取到文件，我用的nodejs 的 koa2作为后台接收代码酱婶：

const file = ctx.request.files.file; // 获取上传文件

const reader = fs.createReadStream(file.path);// 创建可读流

const upStream = fs.createWriteStream(后端存储文件的路径);// 创建可写流
        
reader.pipe(upStream);// 可读流通过管道写入可写流