开发中遇到的问题记录(upload,表格错位,input样式,radio相关)

i东东
362 阅读2分钟

“我正在参加「掘金·启航计划」”

记录:岗位技能矩阵模块开发中遇到的一些问题，每天都在写BUG,写完BUG写补丁......

需求

实现一个上传功能,要求文件选择完成之后不立即提交到后台,当点击下一步时在请求接口！

实现

20230508160145_rec_-convert.gif 效果如上图,下面记录一下实现步骤:

  <el-upload
    style="width:50%;text-align: center;"
    name="upfile"
    :on-change="onChange"
    :show-file-list="false"
    :auto-upload="false"
    action="#"
  />
  // 点击下一步提交文件时需要将文件放入formData对象中:
   const formData = new FormData()
   formData.append('upfile', upfile)

# 方法
- 首先需要通过:auto-upload="false"(是否在选取文件后立即进行上传)来禁止立即上传
- on-change(文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用)通过这个方法可以拿到选中的文件,然后就可以进行接下来的操作了
# 注意:如果禁止了立即上传,before-upload是不会触发的,所以就拿不到文件,需要用到on-change
# 当使用JavaScript上传文件时,通常会创建一个FormData对象的新实例,因为文件不能作为JSON或url编码的请求体的一部分直接发送。当用了FormData对
，就可以使用XMLHttpRequest或fetch API调用将其发送到服务器。

上传文件校验

beforeUpload(file) {
  if (file.type !== 'image/png' && file.type !== 'image/svg+xml') {
    this.$message.warning('上传的图表仅支持SVG、PNG格式')
    return false
  }
},

再选择图片时只显示指定类型的文件只需要在足尖上加上accept=".png,.svg"就可以了

image.png

表格显示Bug

如下图所示,在还有留白的情况下就已经显示滚动条并且还会出现表格错位的情况,这是因为DMO结构渲染发生在了获取数据之前,当获取完数据之后导致的高度计算错误！

image.png

image.png

解决

只需要在获取完数据之后对table进行重新布局就可以了,调用如下方法:

await this.$nextTick(() => {
    this.$refs.myTable.doLayout()
})

image.png

避坑

image.png

如上图,当input类型为password且input样式被修改了,当使用谷歌浏览器的自动填充,input样式就会错乱,招了好久都没找到解决办法,最后通过如下代码解决:

::v-deep .el-input {
  input {
    background: transparent;
    border-width: 0 0 1px 0;
    border-color: #eeeeee;
    font-weight: bold;
    -webkit-appearance: none;
    border-radius: 0px;
    color: $light_gray;
    font-weight: 600;
    height: 41px;
    padding: 0;
    &:-webkit-autofill {
      -webkit-text-fill-color: $light_gray !important;
    }
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill:active {
      -webkit-transition-delay: 99999s;
      -webkit-transition: color 99999s ease-out,
        background-color 99999s ease-out;
    }
  }
}

需求

要求实现如下可编辑的表格,并实现Radio点击选中,再次单击取消选中！

image.png

实现

首先当然是数据处理,处理完成形成表格,首先实现二次点击取消选中:

<el-radio v-model="levelId" :label="twig.id" @click.native.prevent="radioClick()">

需要用到@click.native.prevent来阻止默认事件,这样就可以在方法中对值进行清空或者更改,如此就实现了再次点击取消的功能！

问题

在完成页面显示之后发现点击之后发现值并没有绑定上,暂时还没有想到是什么原因会导致双向绑定失败,所以只能在点击之后手动赋值,如此就有了另一个问题:虽然值有了,但并没有在表格显示,所以只好this.key = Symbol(new Date().toString())更新key值让表格冲渲染....,渲染完成表格就到了顶部:

radioClick(twig, row, index) {
  const myDiv = document.getElementsByClassName('drawer-body')[0]
  this.scrollTop = myDiv.scrollTop
  const levelId = this.postFitSkill[row.name].levelId
  this.$set(this.postFitSkill[row.name], 'levelId', (levelId && levelId === twig.id) ? '' : twig.id) // 赋值
  this.key = Symbol(new Date().toString()) // 重新渲染表格
  this.$nextTick(() => {
    myDiv.scrollTo({ top: this.scrollTop, behavior: 'auto' })
  }) // 滚动条定位
},

当点击之后记录当前滚动条位置,重新渲染表格,滚动条定位到原本的位置,至此神不知鬼不觉的打了个补丁,解决了双向绑定失败的问题！

求解

希望有大佬看见了给小弟解惑一下为什么点击之后并不显示！绑定的数据和结构如下图!感觉是因为阻止冒泡,但是删除点击事件也并没有效果.....

image.png

image.png

小结

感觉自己的代码全是BUG + 补丁,虽然也写完了吧,但是总觉得不应该是这么解决,不过还好解决了,哈哈哈,持续输出BUG中！！！

avatar
文章
阅读
粉丝