element plus 使用细节

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

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-line
    ElMessage({
      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-line
        ElMessage({
          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 ！！！