element plus 使用细节_element puls immediate

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

更多关于vue3的知识可以看我的B站笔记：Vue3 + vite + Ts + pinia + 实战 + 源码 + electron

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>
1
2
3
4
5
6
7
8
9
10
11

select 显示的是value

之所以显示为 value 就是因为，你 v-model 所给的值，和 el-option 的 value 不一致，最常见的就是 0 和 ’0‘ 了

分页和搜索

这里有个问题，就是element plus官网建议不要使用这些事件了：

而是推荐使用v-model，菜鸟试了一下确实简单，但是有个问题，就是你监听怎么个监听法？

如果你吧只把 当前页数 和 每页条数 放入 watchEffect()，搜索单独写一个函数，那么你就会发现，搜索后切换分页，那你喜提一个bug，但是如果把全部的搜索条件都放 watchEffect() 里面去了，那你就会发现输一个字选一个东西就请求一次，是真的不行，所以退而求其次，只能使用 watch，大致代码如下：

// 实时响应分页
watch(
  [currentPage, pageSize],
  (newval, oldval) => {
    console.log(newval, oldval);
    getFormListFun(false);
  },
  {
    immediate: true,
  }
);

// 请求列表
function getFormListFun(bool = false) {
  let pramas = null;
  // bool 用于搜索，让页数从1开始
  if (bool) {
    currentPage.value = 1;
  }
  
  // 判断请求内容
  if (searchVal.value !== "" || formtype.value !== "" || formstatus.value !== "") {
    pramas = {
      pageNo: currentPage.value,
      pageSize: pageSize.value,
      condition: searchVal.value,
      formType: formtype.value,
      formstatus: formstatus.value,
    };
  } else {
    pramas = {
      pageNo: currentPage.value,
      pageSize: pageSize.value,
    };
  }

  // table数据置空
  tableData.value = [];
  getFormList({ ...pramas })
    .then((res) => {
      if (res.code == 200) {
        total = res.data.total;
        tableData.value = tableData.value.concat(res.data.records);
      } else {
        // eslint-disable-next-line
        ElMessage({
          message: res.message,
          type: "error",
        });
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

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>
1
2
3
4
5
6
7
8
9
10

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);
    });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

el-dialog 使用

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

vue2 使用 elementui dialog 的逻辑可以看看我的这篇博客：elementui 的 dialog 常用逻辑总结

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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

一定要用一个参数接收 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，那么你可能喜提巨大的图标等！

解决巨大的图标

解决办法就是在既有 px2rem 又有用到 ElMessage 的界面上加上如下代码：

.el-message-icon--error {
  font-size: 5px;
}
.el-message-icon--success {
  font-size: 5px;
}
.el-message-icon--info {
  font-size: 5px;
}
1
2
3
4
5
6
7
8
9

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

element plus错位的图标

这里是 element plus 自己的bug！

el-message

el-message 的关闭按钮可能会偏移，解决办法就是在 public 底下的 index.html 中加入：

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

主要产生原因就是 .el-icon 的样式和 .el-message-closeBtn 样式冲突了，如图：

el-input / el-select

el-input / el-select 里面的图标可能会偏移，解决办法就是在使用的地方加上 css

.searchBox {
  :deep(.el-input__prefix-inner) {
    align-items: center;
  }
  :deep(.el-input__suffix-inner) {
    align-items: center;
  }
}
1
2
3
4
5
6
7
8

这里菜鸟发现 el-date-picker 等 也有类似问题，而且并不是覆盖的原因，也不知道为什么 github 上没人提出来！！！

ElLoading（继续引入问题）

在使用 按需引入后，一定不能再在代码里又引入 ElLoading 或者 ElMessage，eg：

import { ElLoading } from 'element-plus'
1

否则不生效！！！

如果使用了 eslint 会报错，和 ElMessage 一样，加上忽略下一行就行

// eslint-disable-next-line
const loading = ElLoading.service({
  lock: true,
  text: "Loading",
  background: "rgba(0, 0, 0, 0.7)",
});
1
2
3
4
5
6