ElementUI在实际项目使用步骤详解 ElementUI在实际项目使用步骤详

1.表格自排序
2.分页功能
3.el-checkbox-group多选框
4.封装日历组件
5.用antv-G2实现雷达图
6.多语言支持

1.表格自排序

文章图片

目标：点击入职时间后面的上下箭头可以实现当前页数据按照入职时间升序或者降序排列
思路：给el-table-column添加sortable
排序是对取回来的数据做排序，只在前端。
参考：https://element.eleme.io/#/zh-CN/component/table#pai-xu
代码实现(参考)：

2.分页功能目标（效果）：实现分页获取数据逻辑
思路：按分页组件的属性要求进行配置即可。
步骤：
步骤1：补充数据项
按el-pagination组件的要求，在页面中添加与分页相关的数据项

data() {return {// 省略其他total: 0,page: 1, // 当前页码size: 5, // 每页几条total: 0 // 总共数据条数}}

步骤2：分页结构

步骤3：分页逻辑实现

// 会自动接收当前点击的页码hCurrentChange(curPage) {// alert(curPage)// 1. 更新页码this.page = curPage// 2. 重发请求this.loadEmployee()},// 每页几条hSizeChange(curSize) {// alert(size)// 1. 更新每页的条数this.size = curSize// 2. 重发请求this.loadEmployee()},

3.el-checkbox-group多选框作用（效果）

文章图片

使用注意事项：

对于用来表示多选的el-checkbox-group来说：
v-model的值是数组（表示多选）
它的子元素el-checkbox的label属性决定了选中这一项之后值

模板

管理员开发者人事

数据

data () {return {roleIds: [] // 保存当前选中的权限列表}}

4.封装日历组件效果：

文章图片

思路：这个组件比较大(主页中的代码也比较多了)，所以我们会单独提出来成一个组件
步骤1：封装一个组件（注册引入使用三部曲）
步骤2：在主页中使用日历组件

工作日历

步骤3：用插槽自定义日历内容显示

5.用antv-G2实现雷达图效果：

文章图片

这种图在echarts中也有，这里我们用蚂蚁数据可视化部门的产品antv-G2
https://antv.vision/zh
https://g2.antv.vision/zh/examples/radar/radar#basic
步骤1：安装必要依赖

npm install @antv/data-set @antv/g2

步骤2：创建一个组件来实现雷达图
下面的代码在官网中参考过来的：https://g2.antv.vision/zh/examples/radar/radar#basic

6.多语言支持效果：vue项目中的多语言支持使用的是vue-i18n
参考： https://kazupon.github.io/vue-i18n/zh/started.html
目标：实现elementUI中英文切换功能，感受中文切换的效果
步骤1：安装国际化的包

npm i vue-i18n@8.22.2

步骤2：ElementUI多语言配置
引入element语言包文件src/lang/index.js

// 进行多语言支持配置import Vue from 'vue' // 引入Vueimport VueI18n from 'vue-i18n' // 引入国际化的插件包import locale from 'element-ui/lib/locale'import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包Vue.use(VueI18n) // 全局注册国际化包 // 创建国际化插件的实例const i18n = new VueI18n({// 指定语言类型 zh表示中文en表示英文locale: 'zh',// 将elementUI语言包加入到插件语言数据里messages: {// 英文环境下的语言数据en: {...elementEN},// 中文环境下的语言数据zh: {...elementZH}}})// 配置elementUI 语言转换关系locale.i18n((key, value) => i18n.t(key, value)) export default i18n

【ElementUI在实际项目使用步骤详解】到此这篇关于ElementUI在实际项目使用的功能总结的文章就介绍到这了,更多相关ElementUI项目使用总结内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！