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邏輯中使用組件名稱方法還是需要單獨引入的

到此這篇關(guān)于element-plus 在vue3 中不生效的原因解決方法(element-plus引入)的文章就介紹到這了,更多相關(guān)element-plus vue3 不生效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: