菜鳥一直在糾結(jié)這個(gè)寫不寫，因?yàn)椴浑y，但是菜鳥老是容易忘記，雖然想想或者搜搜就可以馬上寫出來，但是感覺每次那樣就太麻煩了，不如一股做氣寫了算了，后面遇見別的就再來補(bǔ)充！

table 表格自定義內(nèi)容

<el-table-column label="操作" width="230"><template #default="scope"><el-button type="primary" size="small">詳情</el-button><el-popconfirm :title="$t('deleteprompt')" @confirm="deleteEvent(scope.row)"><template #reference><el-button type="danger" size="small">刪除</el-button></template></el-popconfirm><el-button type="primary" size="small" :disabled="scope.row.status == 0">分享</el-button></template>
</el-table-column>

select 顯示的是value

之所以顯示為 value 就是因?yàn)?#xff0c;你 v-model 所給的值，和 el-option 的 value 不一致，最常見的就是 0 和 ’0‘ 了

upload 使用 —— 一個(gè)文件（多個(gè)文件可以借鑒）

el-upload 的 html 部分：

<el-upload class="upload-demo" ref="upload" action="#" :auto-upload="false" :limit="1" :on-change="onFun" :on-exceed="handleExceed" :on-remove="removeFun"><template #trigger><el-button type="primary">選擇文件</el-button></template><el-button class="uploadtext" type="success" @click="submitUpload"> 上傳 </el-button><span class="tip" @click="downloadFile('模板', downloadUrlArr[formdata.formType])"> 下載模板 </span><template #tip><div class="el-upload__tip text-red">* 只能上傳excel文件</div></template>
</el-upload>

upload 邏輯：

// 獲取el-upload元素，方便后面清空
const upload = ref();
// 提交使用
let fd = null;
// 上傳事件
function onFun(file) {if (file.name.indexOf(".xls") > 0 || file.name.indexOf(".xlsx") > 0 || file.name.indexOf(".xlsm") > 0) {fd = new FormData();fd.append("file", file.raw); //傳文件} else {upload.value.clearFiles();// eslint-disable-next-lineElMessage({message: "請(qǐng)選擇excel文件！",type: "error",});}
}
// 刪除文件事件
function removeFun() {upload.value.clearFiles();
}
// 提交第二個(gè)文件事件
const handleExceed = (files) => {// console.log(files);upload.value.clearFiles();const file = files[0];upload.value.handleStart(file);
};
// 提交事件 -》 這部分按邏輯自行更改
const submitUpload = () => {uploadFile(fd).then((res) => {if (res.code == 200) {console.log(res);} else {// eslint-disable-next-lineElMessage({message: res.message,type: "error",});}}).catch((err) => {console.log(err);});
};

下載邏輯：

這個(gè)就是菜鳥插一嘴想寫寫，因?yàn)橄螺d和請(qǐng)求接口的邏輯不太一樣，只需要訪問就行了，菜鳥有時(shí)候也容易忘記，所以這里記一下！

// 枚舉類型
const downloadUrl = localStorage.getItem("downloadUrl"); // 這個(gè)菜鳥在不同環(huán)境設(shè)置的值不同
const downloadUrlArr = [`${downloadUrl}/user/downloadExcel`];// 下載表單
function downloadFile(filename, url) {let a = document.createElement("a");a.style = "display: none"; // 創(chuàng)建一個(gè)隱藏的a標(biāo)簽a.download = filename;a.href = url;document.body.appendChild(a);a.click(); // 觸發(fā)a標(biāo)簽的click事件document.body.removeChild(a);
}

這里界面上調(diào)用的是數(shù)組，是因?yàn)榭赡懿恢挂粋€(gè)地址，菜鳥把地址列舉成為枚舉屬性了，可能不太好！！！

el-dialog 使用

菜鳥發(fā)現(xiàn)官網(wǎng)里面都是直接在一個(gè)文件里面使用，但是一般 el-dialog 都是在組件里面封裝的，所以菜鳥就自己試了一下，結(jié)果問題就來了，這里記錄一下！

vue2 使用 elementui dialog 的邏輯可以看看我的這篇博客：elementui 的 dialog 常用邏輯總結(jié)， 現(xiàn)在發(fā)現(xiàn)寫得不太好，但是勉強(qiáng)可以看 （T——T）

vue3 的坑主要在于：vue3單向數(shù)據(jù)流，但是這個(gè) el-dialog 又要v-model綁定，所以就會(huì)報(bào)錯(cuò)，但是好在發(fā)現(xiàn)官網(wǎng)還有一種綁定方式，那就是 modelvalue ！！！

這里菜鳥就寫個(gè)簡單的例子：

父組件：

<script setup>
import Detail from "./components/detail.vue";// 詳情彈窗
let editshow = ref(false);
let detailencodedCode = ref("");
// 打開
const showDetail = (data) => {detailencodedCode.value = data.encodedCode;editshow.value = true;
};
// 關(guān)閉
function hideEdit() {editshow.value = false;
}
</script><el-table-column label="操作" width="230"><template #default="scope"><el-button type="primary" size="small" @click="showDetail(scope.row)">詳情</el-button></template>
</el-table-column><!-- 詳情彈窗 -->
<Detail v-if="editshow" :pwd="detailencodedCode" :dialogVisible="editshow" @closeEvent="hideEdit"></Detail>

dialog 組件：

<script setup>
import { ref } from "vue";
import { getShareDetail } from "../../../network/api.js";// eslint-disable-next-line
const props = defineProps({dialogVisible: {type: Boolean,default: false,},pwd: {type: String,default: "",},
});// eslint-disable-next-line
const emit = defineEmits(["closeEvent"]);// 關(guān)閉彈窗
function handleClose() {emit("closeEvent", false);
}
const dialogBox = ref()
function closeDialog() {dialogBox.value.resetFields();
}
</script><template><div><el-dialog title="詳情" ref="dialogBox" :modelValue="dialogVisible" :before-close="handleClose" @close="closeDialog"><p>暫無數(shù)據(jù)！</p><template #footer><div><el-button @click="handleClose">關(guān)閉</el-button></div></template></el-dialog></div>
</template>

注意 ：
這里的組件封裝有兩個(gè)問題需要注意！

一定要用一個(gè)參數(shù)接收 defineProps

雖然在 template 里面可以直接使用 defineProps 里面的變量，比如：dialogVisible， 但是 js 里面是不能直接訪問的，會(huì)提示沒有定義，只能通過：props.pwd 訪問，當(dāng)然接收的變量名自己定義就行，不一定要是props ！！！

不要再 el-dialog 上加class

如果你給 el-dialog 上加上了class，那個(gè)你將收獲一個(gè)警告：

Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

element plus 和 px2rem 不兼容

如果你在 element plus 項(xiàng)目中引入了 px2rem，那么你可能喜提巨大的圖標(biāo)等！

錯(cuò)位的圖標(biāo)（element plus自己的bug）

解決辦法就是在 public 底下的 index.html 中加入：

/* 解決 element plus 樣式問題 */
.el-icon.el-message__closeBtn {position: absolute !important;
}

巨大的圖標(biāo)

解決辦法就是在既有 px2rem 又有用到 ElMessage 的界面上加上如下代碼：

.el-message-icon--error {font-size: 5px;
}
.el-message-icon--success {font-size: 5px;
}
.el-message-icon--info {font-size: 5px;
}

記住不要在 style 上加 scoped ！！！