# ElementPlus

## 1安装和配置

官方网站:

https://element-plus-docs.bklab.cn/zh-CN/

官网有中文文档(使用说明书)

![image-20241202093612176](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241202093612176.png

“`cmd
npm install element-plus –save
“`

图标安装

“`cmd
npm install @element-plus/icons-vue
“`

在main.js加入elementPlus相关配置

“`js
import { createApp } from 'vue'
// 引入elementPlus js库 css库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//中文语言包
import zhCn from 'element-plus/es/locale/lang/zh-cn'
//图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import App from './App.vue'
//router单独的配置文件
import router from './router'

//typescript js语法做了类型限制
//对象要先设定类型 使用变量 要标记类型

let myVue = createApp(App)
//vue插件 与vue高度集成
//启动router插件
myVue.use(router)
//启用elementPlus插件
myVue.use(ElementPlus, {
locale: zhCn,
})
//把所有图标导入vue全局组件库
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
myVue.component(key, component)
}

myVue.mount('#app')

“`

## 2elementPlus常用组件

##### 2.2基础组件 按钮

按钮主要是样式 比较简单

“`vue

“`

##### 2.3边框 颜色等其他基础组件

“`vue

“`

##### 2.4布局组件

“`vue

“`

##### 2.5输入框

“`vue

“`

##### 2.6数字输入框

“`vue

“`

##### 2.7单选多选开关

“`vue

“`

##### 2.8下拉列表

“`vue

“`

##### 2.9日期选择

有日期选择 时间选择

“`vue

“`

##### 2.10table组件

table是数据显示的主要组件 每个页面都要使用

主要作用是显示后端返回的动态数据

“`vue

“`

注意:

table是自动遍历的 所以显示每列数据时 通常需要自定义显示的列

![image-20241202151531195](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241202151531195.png

需要搭配table的数据插槽使用 主要作用美化界面 提高交互效果

“`vue




“`

##### 2.11分页组件

“`vue

“`

“`js
// const total = ref(77);
// const page = ref(2);
// const pageSize = ref(10);
const pageInfo = reactive({pageData:{
page:1,
pageSize:10,
total:55,
}})

/*
经常与table的分页功能搭配使用
用户点击按钮时 重新查询table数据 响应之后 给table赋值刷新数据
*/
const paginationCurrentChange = (val)=>{
console.log(val);

}
const paginationSizeChange = (val)=>{
console.log(val);
}
“`

注意:分页组件通常与table组合使用

##### 2.12tree组件

“`html
// tree自动遍历 有默认读取的key
// 可以通过自定义key的对应表 指定解析的数据

//注意:自动的遍历如果没有显示数据 有可能是key每对上(有没有文字的选项)
//对应key的部分多注意 仔细 多复制
“`

“`vue

“`

##### 2.13菜单组件

菜单一般做动态菜单 由后端加载数据 在前端展示

“`vue

“`

##### 2.14反馈组件

“`vue

“`