element-plus使用心得:
1.使用插件unplugin-vue-components来自动按需导入组件很方便,但message等组件使用时需另外导入。
可通过
// 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
的方式调用。相较于官方文档,在组件中import,然后直接调用ElMessage 麻烦一点,但axios,vue-router等这些也都需要全局挂载,然后在组件中通过proxy调用,所以还是一次性全局挂载所有东西方便一些。
2.element-plus icon图标的导入。
将全部icon全局注册后再使用更方便,如下:
import * as ElIconModules from "@element-plus/icons"; // 统一导入el-icon图标
// 利用for/in循环统一注册el-icon图标
for (let iconName in ElIconModules) {
app.component(iconName, ElIconModules[iconName]); //ps:对象可通过obj[key]的方式取值
}
3.element-plus tree组件的踩坑
tree组件中根据角色id打开权限列表,data属性和default-checked-keys属性需要每次打开都重新请求,如果data在声明周期函数中只进行一次请求获取,那default-checked-keys只会在第一个打开的角色的权限列表中生效,后面打开的角色权列表均与第一次打开的相同。