element plus 使用细节

置顶

PBitW

已于 2025-04-09 16:23:43 修改

阅读量1.6k

点赞数 9

分类专栏： vue3 文章标签： table自定义内容 select显示数字 upload使用模板 vue3封装dialog组件 ElLoading无效问题 elementplus图标错位 vue3分页和搜索的坑

于 2023-11-23 10:19:11 首次发布

本文链接：https://blog.youkuaiyun.com/langwang_100/article/details/134570191

版权

本文介绍了Vue3与ElementPlus、Vite、TypeScript、Pinia等技术的实践，包括自定义table、select显示value、分页与搜索、el-upload处理、el-dialog使用技巧，以及elementplus与px2rem的兼容性和图标问题的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

更多关于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="是否删除" @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>

注意

使用了el-popconfirm，权限验证的时候，需要给el-popconfirm和里面的el-button都加权限验证，不然会有问题！

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 {
   
        ElMessage({
   
          message: res.message,
          type: "error",
        });
      }
    })
    .catch((err) => {
   
      console.log(err);
    });
}

2024/7/19补充

最近菜鸟做项目，感觉上面这个搜索还要去 判断请求内容，不是很方便，所以直接提成组件形式，不提不知道，一提才发现这个分页就变得简单多了，这里奉上代码！

search组件

<script setup>
import {
    Search, Plus, Delete } from '@element-plus/icons-vue'

const emit = defineEmits(['add', 'search', 'batchdelete'])

// 时间
let datetime = ref('')
// 搜索
let searchVal = ref('')
const search = () => {
   
  console.log(datetime.value)
  emit('search', {
   
    value: searchVal.value,
    startTime: datetime.value ? datetime.value[0] : '',
    endTime: datetime.value ? datetime.value[1] : ''
  })
}

// 新增
const add = () => {
   
  emit('add', true)
}

// 批量删除
const batchdelete = () => {
   
  emit('batchdelete')
}
</script>

<template>
  <div class="searchBox">
    <el-input v-model="searchVal" placeholder="样本编号/患者姓名/联系电话" clearable></el-input>
    <div class="block">
      <el-date-picker
        v-model="datetime"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </div>
    <el-button type="primary" :