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-uploadv-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穿透? 穿透有多種寫法，今天這里先寫一種記下：

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

另外幾種可參考這篇文章

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