[element-plus] 消息提示ElMessage样式丢失情况解决

"vue": "^3.2.37", "element-plus": "2.10.4",

<template> <div> <div class="container"> <TableCustom :columns="columns" :tableData="menuData" row-key="index" :has-pagination="false" :viewFunc="handleView" :delFunc="handleDelete" :editFunc="handleEdit"> <template #toolbarBtn> <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button> </template> <template #icon="{ rows }"> <el-icon> <component :is="rows.icon"></component> </el-icon> </template> </TableCustom> </div> <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close :close-on-click-modal="false" @close="closeDialog"> <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData"> <template #parent> <el-cascader v-model="rowData.pid" :options="cascaderOptions" :props="{ checkStrictly: true }" clearable /> </template> </TableEdit> </el-dialog> <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close> <TableDetail :data="viewData"> <template #icon="{ rows }"> <el-icon> <component :is="rows.icon"></component> </el-icon> </template> </TableDetail> </el-dialog> </div> </template> <script setup lang="ts" name="system-menu"> import {onMounted, ref} from 'vue'; import { ElMessage } from 'element-plus'; import { CirclePlusFilled } from '@element-plus/icons-vue'; import { Menus } from '@/types/menu'; import TableCustom from '@/components/table-custom.vue'; import TableDetail from '@/components/table-detail.vue'; import { FormOption } from '@/types/form-option'; // import { menuData } from '@/components/menu'; import {fetchMenuData, fetchRoleData} from '@/api'; import TableEdit from "@/components/table-edit.vue"; // 表格相关 let columns = ref([ { prop: 'title', label: '菜单名称', align: 'left' }, { prop: 'icon', label: '图标' }, { prop: 'index', label: '路由路径' }, { prop: 'permission', label: '权限标识' }, { prop: 'operator', label: '操作', width: 250 }, ]) const getOptions = (data: any) => { // debugger return data.map(item => { const a: any = { label: item.title, value: item.id, } if (item.children) { a.children = getOptions(item.children) } return a }) } // const cascaderOptions = ref(getOptions(menuData)); // let cascaderOptions = ref([]); // 初始化为一个空的 ref 对象 // const getData = async () => { // const res = await fetchMenuData(); // cascaderOptions.value = getOptions(res.data); // 使用 .value 赋值 // }; // // // 确保异步操作完成后再打印 // async function init() { // await getData(); // } // // init(); // 定义菜单选项的类型 interface MenuOption { value: string; label: string; children?: MenuOption[]; } const cascaderOptions = ref<MenuOption[]>([]); const getData = async () => { try { const res = await fetchMenuData(); cascaderOptions.value = getOptions(res.data); } catch (error) { console.error('获取菜单数据失败:', error); } }; // 在组件挂载时执行数据获取 onMounted(() => { getData(); }); console.log('cascaderOptions：',cascaderOptions) // 新增/编辑弹窗相关 let options = ref<FormOption>({ labelWidth: '100px', span: 12, list: [ { type: 'input', label: '菜单名称', prop: 'title', required: true }, { type: 'input', label: '路由路径', prop: 'index', required: true }, { type: 'input', label: '图标', prop: 'icon' }, { type: 'input', label: '权限标识', prop: 'permission' }, { type: 'parent', label: '父菜单', prop: 'parent' }, ] }) const visible = ref(false); const isEdit = ref(false); const rowData = ref<any>({}); const handleEdit = (row: Menus) => { rowData.value = { ...row }; isEdit.value = true; visible.value = true; }; const updateData = () => { closeDialog(); }; const closeDialog = () => { visible.value = false; isEdit.value = false; }; // 查看详情弹窗相关 const visible1 = ref(false); const viewData = ref({ row: {}, list: [] }); const handleView = (row: Menus) => { viewData.value.row = { ...row } viewData.value.list = [ { prop: 'id', label: '菜单ID', }, { prop: 'pid', label: '父菜单ID', }, { prop: 'title', label: '菜单名称', }, { prop: 'index', label: '路由路径', }, { prop: 'permission', label: '权限标识', }, { prop: 'icon', label: '图标', }, ] visible1.value = true; }; // 删除相关 const handleDelete = (row: Menus) => { ElMessage.success('删除成功'); } </script> <style scoped></style> 菜单未展示

elementplus 的message组件没有样式了