Vue elementUI中table鼠标移入移除事件控制删除小角标显示隐藏

elementui table中有一个属性scope.$index 可以获取列表中当前行的索引

中间的判断，是判断上传的文件类型，显示相关的图片，

@mouseenter="mouseenter(index, item,scope.$index)" @mouseleave="mouseleave(index, item,scope.$index)"

            <div class="baseImgConss" style="display: flex; flex-wrap: wrap; justify-content: center">
              <div v-for="i in scope.row.warranty" :key="i.id">
                <div v-for="(i, index) in scope.row.warranty" :key="i.id">
                <div v-show="iconDet">
                <div @mouseenter="mouseenter(index, item,scope.$index)" @mouseleave="mouseleave(index, item,scope.$index)" style="display:flex;justify-content: center;">
                <img class="imaged" @click="choseImgView(i)" v-if="i.suffix == 'application/pdf'" style="width: 50px; height: 50px; cursor: pointer" src="@/assets/fileType/pdf.png" alt="" />
                <!-- i.url.substr(-4) === 'xlsx' -->
                <img class="imaged" @click="choseImgView(i)" v-else-if="i.suffix == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || i.suffix == 'application/vnd.ms-excel'" style="width: 50px; height: 50px; cursor: pointer" src="@/assets/fileType/excel.png" alt="" />
                <img
                  class="imaged"
                  @click="choseImgView(i)"
                  v-else-if="i.suffix == 'application/msword' || i.suffix == 'application/wps-writer' || i.suffix == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'"
                  style="width: 50px; height: 50px; cursor: pointer"
                  src="@/assets/fileType/word.png"
                  alt=""
                />
                <img class="imaged" @click="choseImgView(i)" v-else style="width: 50px; height: 50px; cursor: pointer" :src="i.url" alt="" />
                <div class="iconDet" v-show="i.isIconShow" @click="editImg(i)">
                    <el-icon >
                      <Delete style="font-size:15px;margin-left:-60px;"/>
                    </el-icon>
                  </div>
                </div>
              </div>
            </div>

 choseImgView(i) 这个事件是下载或浏览图片的事件

    const choseImgView = (item: IObject) => {
      const el = document.createElement("a");
      el.style.display = "none";
      el.setAttribute("target", "_blank");
      el.href = item.url;
      document.body.appendChild(el);
      el.click();
      document.body.removeChild(el);
    };

 element上传操作

    <el-dialog v-model="visible" title="电子保单上传" :close-on-click-modal="false" :close-on-press-escape="false" width="70%" :destroy-on-close="true">
      <div class="box_con">
        <el-upload multiple class="upload-demo" :action="uploadFileConfigure.url" :on-remove="removeChange" :on-success="successChange" :on-change="handleChange" drag show-file-list>
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">将文件拖到此次处或，<em>点击上传</em></div>
        </el-upload>
        <!-- <template #tip> -->
        <hr style="border: none; background-color: #d8d8d8; margin-top: 20px; height: 1px" />
        <div class="upload-btn-con">
          <div class="item1">操作说明</div>
          <div class="item2">1. 上传文件名称的前17位以VIN码命名，例:LYVXEEDE4ML485264神州租车,pdf</div>
          <div class="item2">2. 将文件拖拽至弹窗内，点击下方“确认”按钮</div>
          <div class="item2">3. 系统将按照VIN匹配车辆，完成电子保单上传(同一辆车可同时上传多个文件)</div>
        </div>
        <div class="el-upload__tip"><el-button type="primary" style="width: 90px" @click="addGuarantee()">确认</el-button></div>
        <!-- </template> -->
      </div>
    </el-dialog>

 

 

      uploadFileConfigure: {} as IObject,
      fileList: [] as any,
      imageList: [
        {
          name: "电子保单",
          imgs: {
            fileTypeName: "warranty",
            name: "电子保单",
            uploadFileList: []
          }
        }
      ]


    const successChange = (file: any, fileList: any) => {
      const resUrl = file.data.url;
      const url = fileList.name;
      // const fileName = url.substring(0, url.lastIndexOf(".")); 截取.号前面的值
      const fileName = url.substring(0, 17); //截取字符串前17位
      state.fileList.push({ vin: fileName, url: resUrl, uid: fileList.uid, suffix: fileList.raw.type });
    };

    const removeChange = (file: any, files: any) => {
      state.fileList.splice(
        state.fileList.findIndex((v: any) => v.uid == file.uid),
        1
      );
    };
    const handleChange = () => {
      // console.log("12312312312");
    };