element-plus vue3 不生效
颜值与实力并存源 人气:0vue3.0 不兼容 element-ui ,于是推出了element-plus
1.安装element-plus (3种方式 )
npm install element-plus --save (推荐)
yarn add element-plus
pnpm install element-plus
2. 在main.js种引用
import 'element-plus/theme-chalk/index.css' //默认css样式 英文 import Element from 'element-plus' //引入插件 import zhCn from 'element-plus/es/locale/lang/zh-cn' //引入中文包 //全局 使用element-plus //中文使用 createApp(App).use(Element,{locale:zhCn}).mount('#app') //默认英文使用 createApp(App).use(Element).mount('#app')
引入最重要看官方引入方法
官方引入方法:
https://element-plus.org/es-ES/guide/quickstart.html#configuracion-global
正常引入不生效的原因如下
原因一
main.js中加载顺序不对
import { createApp } from 'vue' import App from './App.vue' import router from './router' import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; const app = createApp(App) app.use(ElementPlus) app.use(router).mount('#app')
原因二
<el-tree ref="elTreeRef" :data="menus" show-checkbox node-key="id" :props="{ children: 'children', label: 'name' }" @check="handleCheckChange" > import { ElTree } from 'element-plus' const elTreeRef = ref<InstanceType<typeof ElTree>>() const editCallback = (item: any) => { const leafKeys = menuMapLeafKeys(item.menuList) nextTick(() => { console.log(elTreeRef.value) elTreeRef.value?.setCheckedKeys(leafKeys, false) }) }
有的时候全局注册,但是不生效的原因,只能在template中可以使用,在js逻辑中使用组件名称方法还是需要单独引入的
加载全部内容