element-plus使用心得:
1.使用插件unplugin-vue-components來自動按需導(dǎo)入組件很方便医窿,但message等組件使用時需另外導(dǎo)入。
可通過
// main.js 中?
import{ ElMessage }from'element-plus'??
const app=createApp({})
app.config.globalProperties.$message = ElMessage?
的方式掛載到全局 property掠械,然后通過:
// component.vue 中
import { getCurrentInstance, ref } from "vue";
const { proxy } = getCurrentInstance();
proxy.$message?
的方式調(diào)用。相較于官方文檔,在組件中import见芹,然后直接調(diào)用ElMessage?麻煩一點钉嘹,但axios鸯乃,vue-router等這些也都需要全局掛載,然后在組件中通過proxy調(diào)用跋涣,所以還是一次性全局掛載所有東西方便一些缨睡。
2.element-plus icon圖標(biāo)的導(dǎo)入。
將全部icon全局注冊后再使用更方便陈辱,如下:
import * as ElIconModules from "@element-plus/icons";? ? // 統(tǒng)一導(dǎo)入el-icon圖標(biāo)
// 利用for/in循環(huán)統(tǒng)一注冊el-icon圖標(biāo)
for (let iconName in ElIconModules) {
? app.component(iconName, ElIconModules[iconName]);? //ps:對象可通過obj[key]的方式取值
}
3.element-plus tree組件的踩坑
tree組件中根據(jù)角色id打開權(quán)限列表奖年,data屬性和default-checked-keys屬性需要每次打開都重新請求,如果data在聲明周期函數(shù)中只進行一次請求獲取沛贪,那default-checked-keys只會在第一個打開的角色的權(quán)限列表中生效陋守,后面打開的角色權(quán)列表均與第一次打開的相同揍堰。