irai の 知识文档站

Appearance

ElementPlus ​


一、介绍 ​


Element ：是饿了么公司前端开发团队提供的一套基于 Vue3 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。


官方网站：https://element-plus.org/zh-CN/#/zh-CN

微信截图_20250822203123

如下图所示就是我们开发的页面和 ElementUI 提供的效果对比：

可以发现 ElementUI 提供的各式各样好看的按钮。

ce4f140d-6c31-42b9-a56c-bdf12945244b

ElementPlus 的学习方式和我们之前的学习方式不太一样，

对于 ElementPlus，我们作为一个后台开发者，只需要学会如何从 ElementPlus 的官网拷贝组件

到我们自己的页面中，并且做一些修改即可。 我们主要学习的是 ElementPlus 中提供的常用组件，

至于其他组件同学们可以通过我们这几个组件的学习掌握到 ElementPlus 的学习技巧，然后课后自行学习。


二、快速入门 ​


2.1 准备工作 ​


  • 1). 创建一个空文件夹，打开 cmd 使用 create-vue 创建一个工程化的 Vue 项目
    • npm create vue@3.3.4
    • 项目名称（随便）：vue-project01
    • cd vue-project01 进入项目目录
    • npm install 安装依赖
    • 使用 VSCode 将该项目打开。

  • 2). 参照官方文档，安装 ElementPlus 的组件库（在当前工程的目录下），执行如下命令：
shell
npm install element-plus@2.4.4 --save
64f7213e-636b-472b-b363-4940c50e5211
  • 3). 在 main.js 中引入 ElementPlus 组件库 （参照官方文档），最终 main.js 中代码如下：
javascript
import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)

app.mount('#app')

2.2 制作组件 ​


  • 1）. 访问 ElementPlus 的官方文档，查看对应的组件源代码。
2aa878de-e33b-474f-a47c-32f42983c05b

  • 2). 在 src 下创建 views 目录，在 views 目录下，

    创建 Element.vue 组件文件，复制组件代码，调整成自己想要的 。

vue
<script setup>

</script>

<template>
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>
</template>

<style scoped>

</style>

  • 3). 在根组件 app.vue 中引入Element.vue
vue
<script setup>
import Element from './views/Element.vue'
</script>

<template>
  <Element></Element> 
</template>

<style scoped>

</style>

4). 启动项目，访问 http://localhost:5173

f01cf2e8-dc30-4de9-9bc4-0c7369a35bc2

三、常见组件 ​


3.1 表格组件 ​


用于展示多条结构类似的数据， 可对数据进行排序、筛选、对比或其他自定义操作。

f9f6c465-427b-4236-9295-8ec91965c183

接下来我们通过代码来演示。

首先我们需要来到 ElementPlus 的组件库中，找到表格组件，如下图所示：

31001a16-9e06-48c5-af9f-086bca43194d

然后在 Element.vue 组件中继续制作表格。组件中，需要注意的是，我们组件包括了3个部分，

如果官方有除了<template> 部分之外的 <style> 和 <script> 都需要复制。

具体操作如下图所示：

9af86ea6-a175-46c3-a12c-5383d5ad66fa

整体代码如下所示 (绿色背景部分代码为本次增加的代码) ：

vue
<script setup>
const tableData = [ 
  {date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},
  {date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},
  {date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},
  {date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'}
]
</script>

<template>

  <!-- Button按钮 -->
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>

  <br> 

  <!-- Table表格 -->
  <el-table :data="tableData" border style="width: 100%"> 
    <el-table-column prop="date" label="Date" width="180" /> 
    <el-table-column prop="name" label="Name" width="180" /> 
    <el-table-column prop="address" label="Address" /> 
  </el-table> 

</template>

<style scoped>

</style>

此时回到浏览器，我们页面呈现如下效果：

86aac4ca-1aaa-417c-a872-e68eb5213375

📌 Table 表格组件，属性说明：

  • data : 主要定义 table 组件的数据模型
  • prop : 定义列的数据应该绑定 data 中定义的具体的数据模型
  • label : 定义列的标题
  • width : 定义列的宽度

3.2 分页条组件 ​


Pagination : 分页组件，主要提供分页工具条相关功能。其展示效果图下图所示：

bba16eb9-e570-4e66-97d1-ff7814aeaf1a

默认情况下，ElementPlus 的组件是英文的，如果希望使用中文语言，可以在 main.js 中做如下配置：

js
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {locale: zhCn})

接下来我们通过代码来演示功能。

首先在官网找到分页组件，我们选择带背景色分页组件，如下图所示：

25547ea1-71d2-45b5-aa20-60662d16040d

然后复制代码到我们的 Element.vue 组件文件的 template 中，

在 <template> </template> 拷贝如下代码：

vue
 <el-pagination
    v-model:current-page="currentPage4"
    v-model:page-size="pageSize4"
    :page-sizes="[100, 200, 300, 400]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />

在 <script> </script> 中拷贝如下代码：

js
import { ref } from 'vue'

const currentPage4 = ref(4)
const pageSize4 = ref(100)

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}

目前，整个 Element.vue 的文件内容如下(绿色背景部分代码为本次增加的代码)：

vue
<script setup>
import { ref } from 'vue'

const tableData = [
  {date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},
  {date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},
  {date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},
  {date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'}
]

const currentPage4 = ref(4) 
const pageSize4 = ref(100) 

const handleSizeChange = (val) => { 
  console.log(`${val} items per page`) 
} 

const handleCurrentChange = (val) => { 
  console.log(`current page: ${val}`) 
} 
</script>

<template>

  <!-- Button按钮 -->
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>

  <br>

  <!-- Table表格 -->
  <el-table :data="tableData" border style="width: 100%"> 
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
  
  <br>

	<!-- 以下 el-pagination 均为新增  -->
  <el-pagination 
    v-model:current-page="currentPage4" 
    v-model:page-size="pageSize4"
    :page-sizes="[100, 200, 300, 400]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  /> 

</template>

<style scoped>

</style>

打开浏览器，查看页面效果如下：

3d5dc081-e2c1-4a7d-b4c7-b51023d8e64f

Pagination 分页组件的属性如下：

对于分页组件我们需要关注的是如下几个重要属性

（可以通过查阅官网组件中最下面的组件属性详细说明得到）：

  • background : 添加背景颜色，也就是上图蓝色背景色效果。
  • layout : 分页工具条的布局，其具体值包含 sizes, prev, pager, next, jumper, total 这些值
  • total : 数据的总数量
b9af6b48-21c5-4345-a7b6-e6a624ce4106

对于分页组件，除了上述几个属性，还有 2 个非常重要的事件我们需要去学习：

  • size-change ： pageSize 改变时会触发
  • current-change ：currentPage 改变时会触发

3.3 对话框组件 ​


在保留当前页面状态的情况下，告知用户并承载相关操作。

5facb31f-c80d-4887-b4b2-849c5a6fc0a0

首先我们需要在 ElementPlus 官方找到 Dialog 组件，如下图所示：

35ed9b9e-c7e8-4e0a-9c94-46337285bfc0

然后复制如下代码到我们的组件文件 Element.vue 的 <template></template> 模块中：

vue
<el-button @click="dialogTableVisible = true">
    打开对话框
</el-button>

<el-dialog v-model="dialogTableVisible" title="Shipping address">
    <el-table :data="tableData">
        <el-table-column property="date" label="Date" width="150" />
        <el-table-column property="name" label="Name" width="200" />
        <el-table-column property="address" label="Address" />
    </el-table>
</el-dialog>

然后复制如下代码到我们的组件文件 Element.vue 的 <script></script> 模块中：

js
const dialogTableVisible = ref(false)

最终，完成的 Element.vue 的代码如下：

vue
<script setup>
import { ref } from 'vue'

const tableData = [
  {date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},
  {date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},
  {date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},
  {date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'}
]

const currentPage4 = ref(4)
const pageSize4 = ref(100)

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}

// Dialog对话框
const dialogTableVisible = ref(false) 
</script>

<template>

  <!-- Button按钮 -->
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>

  <br>

  <!-- Table表格 -->
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>

  <br>

  <el-pagination
    v-model:current-page="currentPage4"
    v-model:page-size="pageSize4"
    :page-sizes="[100, 200, 300, 400]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />

  <br>

  <el-button @click="dialogTableVisible = true"> 
    打开对话框 
  </el-button> 

  <el-dialog v-model="dialogTableVisible" title="Shipping address"> 
    <el-table :data="tableData"> 
      <el-table-column property="date" label="Date" width="150" /> 
      <el-table-column property="name" label="Name" width="200" />
      <el-table-column property="address" label="Address" /> 
    </el-table> 
  </el-dialog> 

</template>

<style scoped>

</style>

打开浏览器，最终的页面效果如下：

c2185033-4821-46cf-abe5-4d9bed57b88f

📌 Dialog 对话框组件使用的关键点，就是控制其显示与隐藏。

通过 v-model 给定的 boolean 值，来控制 Dialog 的显示与隐藏。


3.4 表单组件 ​


Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

表单在我们前端的开发中使用的还是比较多的，接下来我们学习这个组件，与之前的流程一样，

我们首先需要在 ElementPlus 的官方找到对应的组件示例：如下图所示：

e40ca37d-8ec2-45cb-9e50-1e8cc77156de

然后复制如下代码到我们的组件文件 Element.vue 的 <template></template> 模块中：

vue
<!-- Form 表单 -->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
      
    <el-form-item label="Approved by">
      <el-input v-model="formInline.user" placeholder="Approved by" clearable />
    </el-form-item>

    <el-form-item label="Activity zone">
      <el-select v-model="formInline.region" placeholder="Activity zone" clearable>
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>

    <el-form-item label="Activity time">
      <el-date-picker v-model="formInline.date" type="date" placeholder="Pick a date" clearable/>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Query</el-button>
    </el-form-item>
      
  </el-form>

然后复制如下代码到我们的组件文件 Element.vue 的 <script></script> 模块中：

js
// Form表单
const formInline = ref({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}

最终，完成的 Element.vue 的代码如下：

vue
<script setup>
import { ref } from 'vue'

const tableData = [
  {date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},
  {date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},
  {date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},
  {date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'}
]

const currentPage4 = ref(4)
const pageSize4 = ref(100)

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}

// Dialog对话框
const dialogTableVisible = ref(false)

// Form表单
const formInline = ref({ 
  user: '', 
  region: '', 
  date: '', 
}) 

const onSubmit = () => { 
  console.log('submit!') 
} 

</script>

<template>

  <!-- Button按钮 -->
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>

  <br>

  <!-- Table表格 -->
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>

  <br>

  <el-pagination
    v-model:current-page="currentPage4"
    v-model:page-size="pageSize4"
    :page-sizes="[100, 200, 300, 400]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />

  <br>

  <el-button @click="dialogTableVisible = true">
    打开对话框
  </el-button>

  <el-dialog v-model="dialogTableVisible" title="Shipping address">
    <el-table :data="tableData">
      <el-table-column property="date" label="Date" width="150" />
      <el-table-column property="name" label="Name" width="200" />
      <el-table-column property="address" label="Address" />
    </el-table>
  </el-dialog>

  <br><br>

  <!-- Form 表单 -->
  <el-form :inline="true" :model="formInline" class="demo-form-inline"> 
    <el-form-item label="Approved by">
      <el-input v-model="formInline.user" placeholder="Approved by" clearable />
    </el-form-item>

    <el-form-item label="Activity zone">
      <el-select v-model="formInline.region" placeholder="Activity zone" clearable>
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>

    <el-form-item label="Activity time">
      <el-date-picker v-model="formInline.date" type="date" placeholder="Pick a date" clearable/>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Query</el-button>
    </el-form-item>
  </el-form>

</template>

<style scoped>

</style>

打开浏览器，查看页面效果：

49e8c704-2339-4ba5-b2e6-92beb294d77e

四、案例 ​


需求：基于 ElementPlus 组件库制作如下页面，并异步获取数据，完成页面展示。

a46d8e4d-69c4-4a01-b0a4-36448e455938

Copyright © 2025 irai. All rights reserved | 粤ICP备2024313367号-1