elemnt组件的坑点以及解决办法（持续更新）

VUE群号：115658205

1.el-upload图片上传组件

<el-upload action="" :data="{type: '0001'}" :limit="1" :http-request="handleupload" :on-remove="removeLoad" list-type="picture-card">
                <img v-if="legalPersonIdCard" :src="legalPersonIdCard" width="150" height="150" alt="" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

在上述使用的时候一般:remove的事件中我移除一张图片的时候执行事件

但是如果我要在移除的时候执行方法，并且删除数组中指定参数就必须使用方法如下

removeLoad(file,fileList,data) 或 removeLoad(data)

但是这样的写法会导致removeLoad方法一直在执行/每次执行:http-request之后执行方法

<el-upload action="" :data="{type: '0001'}" :limit="1" :http-request="handleupload" :on-remove="(file, fileList) => {removeLoad(file, fileList, '0001')}" list-type="picture-card">
                <img v-if="legalPersonIdCard" :src="legalPersonIdCard" width="150" height="150" alt="" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

需要将代码如上重写即可

2. el-dialog弹窗嵌套el-form表单的时候回车事件会导致页面直接刷新

<el-form @submit.native.prevent>
  <el-form-item :label="$t('financial.uploadDocuments')">
    <el-upload
      class="avatar-uploader"
      action="/niuke/api/common/upload"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" width="200" height="200" alt="" />
      <i v-else class="el-icon-plus avatar-uploader-icon width_200 height_200"></i>
    </el-upload>
  </el-form-item>
</el-form>

需要在el-form中把冒泡事件直接截断并且否则就会刷新页面

3.el-table > el-table-column 在同页面使用切换导入数据后表头出现排序错误问题

 

因为嵌套过多的 el-table-column 会使用v-if 判断显示隐藏

如果使用 v-show 不生效

会导致数据渲染的时候重新渲染的时候 v-if 的惰性导致优先渲染共用的字段/其中一部分

导致排列顺序出现错误

需要在每一个 el-table-column 当中添加固定的key值进行位置的排序固定即可

<el-table-column v-if="[1].includes(listType)" key="9" prop="change_amount" :label="$t('financial.changesInAmount')" sortable :sort-method="(a, b) => setDataSort(a, b, 'change_amount')" />
<el-table-column v-if="[1].includes(listType)" key="10" prop="amount" :label="$t('financial.afterChangesInAmount')" sortable :sort-method="(a, b) => setDataSort(a, b, 'amount')" />

4. el-table 在vue2中添加使用时，会因为屏幕高度去做自适应高度调整的设置（max-height属性），如果动态读取大屏没问题，但是小屏幕（越贴近手机的电脑屏幕）会出现table在疯狂闪动的情况，导致无法进行任何操作，会一直卡在渲染层。使用时，切记此问题，出现。

目前使用解决办法

1.固定高度，但是依旧会在少部分屏幕出现此问题

2.直接不使用