element plus 使用细节

菜鸟一直在纠结这个写不写，因为不难，但是菜鸟老是容易忘记，虽然想想或者搜搜就可以马上写出来，但是感觉每次那样就太麻烦了，不如一股做气写了算了，后面遇见别的就再来补充！

文章目录

table 表格自定义内容
select 显示的是value
upload 使用 —— 一个文件（多个文件可以借鉴）
el-dialog 使用
- 一定要用一个参数接收 defineProps
- 不要再 el-dialog 上加class
element plus 和 px2rem 不兼容
- 错位的图标（element plus自己的bug）
- 巨大的图标

table 表格自定义内容

<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 就是因为，你 v-model 所给的值，和 el-option 的 value 不一致，最常见的就是 0 和 ’0‘ 了

upload 使用 —— 一个文件（多个文件可以借鉴）

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: "请选择excel文件！",type: "error",});}
}
// 删除文件事件
function removeFun() {upload.value.clearFiles();
}
// 提交第二个文件事件
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);});
};

下载逻辑：

这个就是菜鸟插一嘴想写写，因为下载和请求接口的逻辑不太一样，只需要访问就行了，菜鸟有时候也容易忘记，所以这里记一下！

// 枚举类型
const downloadUrl = localStorage.getItem("downloadUrl"); // 这个菜鸟在不同环境设置的值不同
const downloadUrlArr = [`${downloadUrl}/user/downloadExcel`];// 下载表单
function downloadFile(filename, url) {let a = document.createElement("a");a.style = "display: none"; // 创建一个隐藏的a标签a.download = filename;a.href = url;document.body.appendChild(a);a.click(); // 触发a标签的click事件document.body.removeChild(a);
}

这里界面上调用的是数组，是因为可能不止一个地址，菜鸟把地址列举成为枚举属性了，可能不太好！！！

el-dialog 使用

菜鸟发现官网里面都是直接在一个文件里面使用，但是一般 el-dialog 都是在组件里面封装的，所以菜鸟就自己试了一下，结果问题就来了，这里记录一下！

vue2 使用 elementui dialog 的逻辑可以看看我的这篇博客：elementui 的 dialog 常用逻辑总结，现在发现写得不太好，但是勉强可以看（T——T）

vue3 的坑主要在于：vue3单向数据流，但是这个 el-dialog 又要v-model绑定，所以就会报错，但是好在发现官网还有一种绑定方式，那就是 modelvalue ！！！

这里菜鸟就写个简单的例子：

父组件：

<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;
};
// 关闭
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"]);// 关闭弹窗
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>暂无数据！</p><template #footer><div><el-button @click="handleClose">关闭</el-button></div></template></el-dialog></div>
</template>

注意：
这里的组件封装有两个问题需要注意！

一定要用一个参数接收 defineProps

虽然在 template 里面可以直接使用 defineProps 里面的变量，比如：dialogVisible，但是 js 里面是不能直接访问的，会提示没有定义，只能通过：props.pwd 访问，当然接收的变量名自己定义就行，不一定要是props ！！！

不要再 el-dialog 上加class

如果你给 el-dialog 上加上了class，那个你将收获一个警告：

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 项目中引入了 px2rem，那么你可能喜提巨大的图标等！

错位的图标（element plus自己的bug）

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

/* 解决 element plus 样式问题 */
.el-icon.el-message__closeBtn {position: absolute !important;
}

巨大的图标

解决办法就是在既有 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 ！！！