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

代码实现(参考):

<!-- 1.定义需要根据字段排序的字段名称 -->

<el-table :data="list" border :default-sort="{prop: 'workNumber'}">
</el-table>

<!-- 2.保证字段列上声明了prop属性 和 sortable属性 -->

<el-table-column label="入职时间" sortable prop="timeOfEntry">
</el-table-column>

2.分页功能

目标(效果):实现分页获取数据逻辑

思路:按分页组件的属性要求进行配置即可。

步骤:

步骤1:补充数据项

按el-pagination组件的要求,在页面中添加与分页相关的数据项

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

步骤2:分页结构

<div style="height: 60px; margin-top: 10px">
<!-- 分页 -->
        <el-pagination
          layout="total, sizes,prev, pager, next, jumper"
          :total="total"
          :page-size="size"
          :page-sizes="[2,5,10]"
          @current-change="hCurrentChange"
          @size-change="hSizeChange"
        />
</div>

步骤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属性决定了选中这一项之后值

模板

<el-checkbox-group v-model="roleIds">
  <el-checkbox label="110">管理员</el-checkbox>
  <el-checkbox label="113">开发者</el-checkbox>
  <el-checkbox label="115">人事</el-checkbox>
</el-checkbox-group>

数据

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

4.封装日历组件

效果:

思路:这个组件比较大(主页中的代码也比较多了),所以我们会单独提出来成一个组件

步骤1:封装一个组件 (注册引入使用三部曲)

步骤2:在主页中使用日历组件

<el-card class="box-card">
  <div slot="header" class="header">
    <span>工作日历</span>
  </div>
  <!-- 放置日历组件 -->
  <calender />
</el-card>

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

<template>
  <el-calendar v-model="currentDate">
    <template slot="dateCell">
      <div class="date-content">
        <span class="text">01</span>
        <span class="rest">休</span>
      </div>
    </template>
  </el-calendar>
</template>

<script>
export default {
  data() {
    return {
      curDate: new Date()
    }
  }
}
</script>

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

<template>
  <div id="container" />
</template>

<script>
import DataSet from '@antv/data-set'
import { Chart } from '@antv/g2'
export default {
  mounted() {
    const data = [
      { item: '工作效率', a: 70, b: 30 },
      { item: '考勤', a: 60, b: 70 },
      { item: '积极性', a: 50, b: 60 },
      { item: '帮助同事', a: 40, b: 50 },
      { item: '自主学习', a: 60, b: 70 },
      { item: '正确率', a: 70, b: 50 }
    ]
    const { DataView } = DataSet
    const dv = new DataView().source(data)
    dv.transform({
      type: 'fold',
      fields: ['a', 'b'], // 展开字段集
      key: 'user', // key字段
      value: 'score' // value字段
    })

    const chart = new Chart({
      container: 'container',
      autoFit: true,
      height: 500
    })
    chart.data(dv.rows)
    chart.scale('score', {
      min: 0,
      max: 80
    })
    chart.coordinate('polar', {
      radius: 0.8
    })
    chart.tooltip({
      shared: true,
      showCrosshairs: true,
      crosshairs: {
        line: {
          style: {
            lineDash: [4, 4],
            stroke: '#333'
          }
        }
      }
    })
    chart.axis('item', {
      line: null,
      tickLine: null,
      grid: {
        line: {
          style: {
            lineDash: null
          }
        }
      }
    })
    chart.axis('score', {
      line: null,
      tickLine: null,
      grid: {
        line: {
          type: 'line',
          style: {
            lineDash: null
          }
        }
      }
    })

    chart
      .line()
      .position('item*score')
      .color('user')
      .size(2)
    chart
      .point()
      .position('item*score')
      .color('user')
      .shape('circle')
      .size(4)
      .style({
        stroke: '#fff',
        lineWidth: 1,
        fillOpacity: 1
      })
    chart
      .area()
      .position('item*score')
      .color('user')
    chart.render()
  }
}
</script>

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' // 引入Vue
import 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项目使用总结内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue+ElementUI项目使用webpack输出MPA的方法

    一. 需求分析 为另一个项目提供可嵌入的功能单页,大部分页面使用时都是独立功能页,个别页面带有左侧边栏(相当于3-4个页面的整合形态),由于资源定位地址的限定,每个页面打包为单页后,入口html文件需要定制命名,且脚本和样式文件需要放在指定的路径下,公共资源地址也必须替换成特殊字符以适配母系统的调用逻辑(比如下面结构中应用jquery.min.js的路径可能是{{publicRoot}}/{{publicLib}}/jquery.minjs).假设原工程中拥有AB这2个旧页面,现在需要开发CDE

  • elementUI select组件使用及注意事项详解

    elementUI select组件使用详解 动态生成option选项 option选项绑定对应的文本值和value值 作为表单项目,新增.编辑功能 对选项改变后触发相关事件 <div id="app"> <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm"> <el-form-i

  • Vue3+elementui plus创建项目的方法

    1.使用elementui plus版本实现按需加载组件会报错 Error: Cannot find module 'babel-preset-es2015' from 'D:\danzhukeji\danzhu\my_pp\src' 这样的情况下 { "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { &

  • ElementUI Tree 树形控件的使用并给节点添加图标

    前言: 因为项目需要用Vue做一个管理系统,其中有一个公司部门的管理页面有用到ElementUI 的树形控件,但是结构中没有使用chexkBox选项框,针对这个功能碰到的一些问题做一下总结 一,数据渲染 1)在<el-tree>标签中绑定data属性 2)在vue实例的data中声明list变量 3)从后台获取到的数据是以数组里面嵌套多个对象的结构并赋值给list, 当前的数据是OrgName为当前结构名称, Children作为子分支数组, 子分支中的结构与当前结构一致 4)在页面中展示结构

  • Vue项目查看当前使用的elementUI版本的方法

    在我们引入elementUI的时候,一般是两种方式:npm安装或者在script直接引入: 当然,在script直接引入的时候,我们也可以通过直接指定版本的方式,达到锁定版本的效果. <script src="//unpkg.com/element-ui@2.3.8/lib/index.js"></script> 直接引入是从外网引入,每次加载都是读取外部网站,我们大部分开发者可能使用的是npm安装的方式,采用这种方式引入的时候,elementUI会保存在vue

  • vue+elementUi图片上传组件使用详解

    上传组件封装需求分析 在基于elementUI库做的商城后台管理中,需求最大的是商品管理表单这块,因为需要录入各种各样的商品图片信息.加上后台要求要传递小于2M的图片,因此封装了一个upload.vue组件作为上传页面的子组件,它用于管理图片上传逻辑. upload.vue解析 upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候显示默认图片,有图片则显示上传图片,因为input样式不太符合需求所以只是将起设置为不可见,不能将其设置为display:non

  • 详解如何在vue项目中引入elementUI组件

    前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一下初始后的demo,如果没有问题则进行安装elementUI npm run dev 安装 elementUI npm i element-ui -S 引入elementUI 在main.js中引入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vu

  • vue elementUI使用tabs与导航栏联动

    不使用tabs标签页时,点击导航菜单,router-view映射相应的组件即可显示页面.但我们想在点击导航栏时在tabs中映射相应的组件,这就需要使用tabs组件 在slider.vue中点击路由后,把当前选择的路由@select使用bus传出去 <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color=

  • 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 代码实现(参考): <!-- 1.定义

  • gitee命令行上传项目的步骤详解

    1.注册gitee账户 2.登录gitee新建个仓库,用来存放项目 3.找到需要上传的项目,右键,git bash here 这里需要先去官网下载安装git git官网 4.git init命令在当前文件夹下创建一个本地仓库 5.git remote add origin 远程仓库地址 6.对需要上传的项目添加追踪,git add .代表当前文件夹下的所有文件都添加追踪 git add "项目名" 单独给某个项目添加追踪 7.先提交到本地仓库 git commit -m "提

  • 使用IDEA创建java项目的步骤详解(hello word)

    前提:已安装好jdk,配置好环境变量.我使用的是java 8 首先在自己的D盘下建一个文件夹,用来存放我们待会新建的项目,我创建了IdeaProject: 1,第一步打开idea 2,第二步选择创建java项目,并选择自己的jdk(我自己本地已经配置了所以有),没有可以点击new去自己的安装目录下找,一般默认安装C:\Program Files\Java,然后选择next 下一步 3,第三步将"Create project from template"前面的勾去掉,然后点击"

  • 亲手教你IDEA2020.3创建Javaweb项目的步骤详解

    IDEA2020.3激活码 最新idea2020激活码超详细教程(设置插件仓库成功激活到2099年) 关于最新IDEA2020.2.1,2.2,3以上破解,激活失效,重新激活的问题 创建Javaweb项目 第一步:在当前Project下创建一个Java的Module 第二步:右键当前模块选择Add Frameworks Support勾中Web Application 第三步:点击Edit Configurations,点击+号选择Tomcat Server的Local然后再选择Deployme

  • vue脚手架项目创建步骤详解

    vue脚手架 -> vue.cli 快速的创建一个大型的功能齐全的vue项目模板(初始化项目) 土味解释:快速的创建一个空的vue项目 安装(全局安装) 全局安装 > npm i @vue/cli -g 创建vue脚手架项目 > vue create 项目名 配置选项 Vue CLI v4.5.11 ? Please pick a preset: (Use arrow keys) > Default ([Vue 2] babel, eslint) Default (Vue 3 Pr

  • java创建jar包并被项目引用步骤详解

    目录 jar包? 1.创建项目和验证 1.1创建项目 1.2 创建包和类 1.3相应的代码 2.打包和引用包 2.1打jar包 2.2 导入生成的jar包 2.3 验证jar包导入/应用的正确性 jar包? jar包: 实现了特定功能的,java字节码文件的压缩包.本质上就是一个编译后的java项目,打包成jar文件log4j.jar , mysql-connection-8.01.jar等. 自己创建jar包,让别人来用: 1.新建java项目 2.创建实现了特定功能的类 3.将该项目生成为j

  • IDEA创建springboot + mybatis项目全过程(步骤详解)

    鉴于隔很久再在IDEA新建springboot项目时,会出现对步骤不确定的情况,因此,写下这篇博客记录创建一个可运行的springboot+mybatis项目的全过程. 步骤如下: 1.打开IDEA 2.File ==> new ==> project ,如图: 3.选择spring Initializr ==> 右边的Project SDK我选的是我已经安装的1.8版本,其他默认 ==> 点击next 4.填写Group (自己随意就行,我的是cn + 个人英文名 + study

  • docker中部署golang项目的步骤详解

    理解Docker Docker可以帮您为自己的应用程序创建一个单一的可部署"单位".这样的单位也叫做容器,其中包含了应用程序需要的一切.例如代码(或二进制文件).运行时.系统工具,以及系统库文件.将所有这些需要的内容打包为一个单一的单位,可确保无论将应用程序部署在何处,都能提供完全相同的环境.这种技术还可以帮您维持完全一致的开发和生产环境,通常这些环境是很难被追踪的. 一旦搭建完成,容器的创建和部署将可自动进行.这本身就可以避免一系列问题.这些问题中大部分都是因为文件不同步,或开发和生

  • 在云虚拟主机部署thinkphp5项目的步骤详解

    前言 Thinkphp作为开源的PHP框架发展到今天,无疑是国内最适合PHP学员学习和使用的框架,除了简单容易上手,更大的优点是开发文档完善.插件丰富.本文将给大家详细介绍关于在在云虚拟主机部署thinkphp5项目的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 查阅ThinkPHP5.0完全开发手册->部署->虚拟主机环境,了解情況后,开始修改. 环境 thinkphp 5.0.11 阿里云云虚拟系统CentOS 第一步 修改移动入口文件位置,把它移动到根目录下

  • springboot学习之构建简单项目搭建步骤详解

    概述 相信对于Java开发者而言,spring和springMvc两个框架一定不陌生,这两个框架需要我们手动配置的地方非常多,各种的xml文件,properties文件,构建一个项目还是挺复杂的,在这种情况下,springboot应运而生,他能够快速的构建spring项目,而且让项目正常运行起来的配置文件非常少,甚至只需要几个注解就可以运行整个项目. 总的说来,springboot项目可以打成jar包独立运行部署,因为它内嵌servlet容器,之前spring,springMvc需要的大量依赖,

随机推荐