ant-design-vue和element-ui冲突解决方案

我这个项目vue2,主要使用ant-design-vue;但是ant-design-vue,table有一些我无法处理的缺陷(也许是本人菜);因此引入了element-ui部分组件(el-table, el-table-column);
主要冲突点是:$xxx之间的冲突,搜了一些方案,包括:
1、node命令处理
2、patch包
3、本次采用方案:
查看node_modules/ant-design-vue/es/index.js,主要对下面这些内容挂载到Vue.prototype;将这块重新到utils文件夹下,并在main.js内使用;

文件一:utls/useAntDesign.js

// 主UI框架使用ant-design-vue; 代码旨在兼容element-ui和ant-design-vue冲突问题;
import { Message as message, Notification as notification, Modal } from 'ant-design-vue';

const install = function (Vue) {
	Vue.prototype.$message = message;
	Vue.prototype.$notification = notification;
	Vue.prototype.$info = Modal.info;
	Vue.prototype.$success = Modal.success;
	Vue.prototype.$error = Modal.error;
	Vue.prototype.$warning = Modal.warning;
	Vue.prototype.$confirm = Modal.confirm;
	Vue.prototype.$destroyAll = Modal.destroyAll;
};

export default install;

文件二:main.js
// 主UI框架使用ant-design-vue;

import useAntDesign from "@/utils/useAntDesign.js";
useAntDesign(Vue);
posted @ 2025-05-26 17:21  Math点PI  阅读(158)  评论(0)    收藏  举报