Vue3+ElementPlus+TS开发业务功能的问题汇总(持续更新)

杜sir20102024-05-11 10:02

1.开发表单弹框功能时遇到两个问题：加入了校验规则后，无论下拉框是否选择数据下面的红色提示都会触发显示不会自动隐藏；另外，新增的功能在提交后数据无法重置，这种在修改时可能会出现，但新增正常情况是不会出现的，故此一脸懵逼。

最后查找原因是因为表单绑定model时候用错了方法，用的v-model指令进行的绑定，而不是:model的方式绑定的模型，两者是有区别的，其中:model相当于v-bind:model这个指令而不是v-model这样；

具体区别可以参考这篇文章：

v-model和:model的区别_:model和v-model区别-CSDN博客

2.使用上传文件功能，上传文件如果没有单独的文件上传服务器或者上传文件的服务和前端页面地址并不一致的情况下需要自定义请求调用上传服务。下面是具体的实现代码：

复制代码

<template>
<el-form-item label="图片" style="flex-basis: 100%">
        <el-upload
          v-model:file-list="fileLists"
          :http-request="uploadFile"
          list-type="picture-card"
          multiple
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>
</template>
<script lang="ts" setup>
    const dialogImageUrl = ref<string>("");
const dialogVisible = ref<boolean>(false);
const fileLists = ref<any>([]);
const fileUrlMap = new Map();
const handleRemove: UploadProps["onRemove"] = (uploadFile: any) => {
  const { uid } = unref(uploadFile);
  fileUrlMap.delete(uid);
};
//预览图片
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};
//自定义图片上传
async function uploadFile(options: UploadRequestOptions): Promise<any> {
  const result = await commonUpload(options.file);
  fileUrlMap.set(options.file.uid, result.toString());
}
</script>

通过绑定http-request="uploadFile" 这样可以调用远程的上传服务另外如果要实现平铺的预览效果配置这个属性即可list-type="picture-card"

3.sass穿透穿透有多种写法，今天这里先写一种记下：

css 复制代码

::v-deep .el-upload-list {
  .el-upload-list__item,
  .el-upload--picture-card {
    width: 100px;
    height: 100px;
  }
}

另外几种可参考这篇文章

sass样式穿透方式_sass穿透-CSDN博客