2021年3月问题汇总

Aditya2021-04-13开发问题

2021年3月问题汇总

el-table 自定义表头无法重新渲染
如何在 v-html 中使用 filters
解决用v-html插入的文本不换行
七牛上传图片错误：error: "file exists"
input使用v-model并且用e.target.value赋值

1. el-table 自定义表头无法重新渲染

<template slot="header">
    <div class="result-table-header">
      <div class="left-title">
        <div class="title">筛选结果</div>
        <div class='sub-title'>（共筛选到{{total}}位）</div>
      </div>
    </div>
</template>

问题

el-table上使用插槽 slot=“header”来实现自定义表头,但是比较奇怪的是total数据变化后，视图并没有更新.

解决

一般情况下是使用v-if来解决，但是由于他是条件渲染，所以能不用就不用。
采用v-slot来替代：
slot=“header” 改成v-slot: header 缩写#header

<template #header>
// or
<template slot="header" slot-scope="scope">

需要使用 template 或组件包裹,
header=“scope” 为 slot="header" 和 slot-scope="scope" 的合体, header 为插槽名， scope 为接受的参数

2. 如何在 v-html 中使用 filters

使用 $options.filters

v-html="$options.filters.highlight(option.title)"

3. 解决用v-html插入的文本不换行

.text-wrapper {
  white-space: pre-wrap;
}

4. 七牛上传图片错误：error: "file exists"

使用qiniu-js前端通过token的形式上传图片时，正常的从相册中选择图片上传不会报错，但是拍照上传图片就会报该错误

上传域名：https://upload.qiniup.com/
方法：Qiniu.upload(file, key, token, putExtra, config);

在ios下拍照后图片名字都是一致的，key取得是图片名字，所以导致文件资源存在，解决方案是直接将key设为null就可以

    const token = data.data.token;
    const key = file.name || null; // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
    const config = {};
    const putExtra = {
      fname: '', //文件原文件名
      params: {}, //用来放置自定义变量
      mimeType: null, //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
    };
    const observable = Qiniu.upload(file, key, token, putExtra, config);

5. input使用v-model并且用e.target.value赋值

<input class="node-inputs" type="number" v-model="patientInfo.patientYear" :max="130" :min="0" @input="ageInput($event, 'age')" @change="ageChange"/>

ageInput(evt, type) {
  let num = evt.target.value

  let maxValue = type === 'age' ? 120 : 11
  if (!num) {
    evt.target.value = 0
    return
  }

  num = num.toString().replace(/[^\d]/g, '')
  num = parseInt(num) || 0
  num = _.sortBy([0, maxValue, num])[1]
  evt.target.value = num
}

问题

如上，使用了语法糖来实现双向绑定，但又使用了onInput来赋值，会导致页面显示值与绑定的值不一致。

输入框内输入了111111，会自动变为120，但当blur后，v-bind绑定的值实际上确实1201，输入222222……，显示1202，相当于120拼接了一位

原因

v-model本质是是 value 和 onInput 的语法糖，v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

这句话也恰恰说明了这次问题所在，我们通过原生事件（onInput）的 e.target.value 对输入框进行赋值，导致了 v-model 绑定的数据冲突，数据不统一。

解决方案

value替代v-model

2021年3月问题汇总

ON THIS PAGE