UI组件库Element Plus
3、开关与滑块组件
开关是很常见的一种页面元素，有开和关两种状态来支持用户交互。在Element Plus中，使用el-switch来创建开关组件。开关组件的状态只有两种，如果需要使用连续状态的组件，则可以使用el-slider组件，这个组件能够渲染出进度条与滑块，用户可以方便地对进度进行调节。
3.1、开关组件
el-switch组件支持开发者对开关颜色、背景颜色等进行定制，常用属性列举如表所示。
| 属性 | 意义 | 值 |
|---|---|---|
disabled |
设置是否禁用 | 布尔值 |
loading |
设置是否加载中 | 布尔值 |
width |
设置按钮的宽度 | 数值 |
active-text |
设置开关打开时的文字描述 | 字符串 |
inactive-text |
设置开关关闭时的文字描述 | 字符串 |
active-value |
设置开关打开时的值 | 布尔值/字符串/数值 |
inactive-value |
设置开关关闭时的值 | 布尔值/字符串/数值 |
active-color |
设置开关打开是的背景色 | 字符串 |
inactive-color |
设置开关关闭时的背景色 | 字符串 |
validate-event |
改变开关状态时，是否触发表单校验 | 布尔值 |
before-change |
开关状态之前调用的函数 | 函数 |
Change |
开关状态发生变化后调用的函数 | 函数 |
下面的代码将演示几种基础的标签样式：
html
<template>
<div style="margin: 20px;">
<el-switch
v-model="switch1"
active-text="会员"
inactive-text="非会员"
active-color="#00FF00"
inactive-color="#FF0000">
</el-switch>
<el-switch
v-model="switch2"
active-text="加载中"
:loading="true">
</el-switch>
<el-switch
v-model="switch3"
inactive-text="禁用"
:disabled="true">
</el-switch>
</div>
</template>
3.2、滑块组件
当页面元素有多种状态时，我们可以尝试使用滑块组件来实现。滑块组件既支持承载连续变化的值，也支持承载离散变化的值。同时，滑块组件还支持结合输入框一起使用，可谓非常强大。el-slider组件的常用属性列举如表所示。
| 属性 | 意义 | 值 |
|---|---|---|
min |
设置滑块的最小值 | 数值 |
max |
设置滑块的最大值 | 数值 |
disabled |
设置是否禁用滑块 | 布尔值 |
step |
设置滑块步长 | 数值 |
show-input |
设置是否显示输入框 | 布尔值 |
show-input-controls |
设置显示的输入框是否有控制按钮 | 布尔值 |
input-size |
设置输入框尺寸 | large small default |
show-stops |
是否显示间断点 | 布尔值 |
show-tooltip |
是否显示刻度提示 | 布尔值 |
format-tooltip |
对刻度信息进行格式化 | 函数 |
range |
设置是否为范围选择模式 | 布尔值 |
vertical |
设置是否为竖向模式 | 布尔值 |
height |
设置竖向模式时滑块组件的高度 | 字符串 |
marks |
设置标记 | 对象 |
change |
滑块组件的值发生变化时调用的函数，只在鼠标拖动结束触发 | 函数 |
input |
滑块组件的值发生变化时调用的函数，鼠标揉动过程中也会触发 | 函数 |
滑块组件默认的取值范围为0~100，我们几乎无须设置任何额外属性，就可以对滑块组件进行使用，例如：
html
<script setup>
import { ref, watch } from 'vue'
const sliderValue = ref(50)
</script>
<template>
<div style="margin: 20px;">
<el-slider v-model="sliderValue"></el-slider>
</div>
</template>
可以看到，当我们对滑块进行拖动时，当前的值会显示在滑块上方，对于显示的文案，我们可以通过format-tooltip属性来进行定制。例如，要进行百分比显示，示例代码如下：
html
<el-slider v-model="sliderValue" :format-tooltip="format"></el-slider>format函数实现如下：
js
const format = (value)=>{
return `${value}%`
}
如果滑块组件可选中的值为离散的，我们可以通过step属性来进行控制，在上面代码的基础上，若只允许选择以10%为间隔的值，示例代码如下：
html
<el-slider
v-model="sliderValue"
:format-tooltip="format"
:step="10"
:show-stops="true"
></el-slider>
如果设置了show-input属性的值为true，则页面还会渲染出一个输入框，输入框中输入的值与滑块组件的值之间是联动的，如图所示。
el-slider组件也支持进行范围选择，当我们需要让用户选中一段范围时，可以设置其range属性为true，效果如图所示。
最后，我们再来看一下el-slider组件的marks属性，这个属性可以为滑块的进度条配置一组标记，对于一些重要节点，还可以使用标记进行突出展示。示例代码如下：
html
<el-slider v-model="sliderValue" :marks="marks"></el-slider>marks数据配置如下：
js
const marks = {
0: '起点',
50: '半程',
90: {
style: {color: '#ff0000'},
label: '就到终点啦'
}
}
4、选择器组件
选择器组件的使用场景与选择列表类似，只是其场景更加定制化。Element Plus中提供了时间日期、颜色相关的选择器，在需要的场景中可以直接使用。
4.1、时间选择器
el-time-picker用来创建时间选择器，可以方便地供用户选择一个时间点或时间范围。el-time-picker中的常用属性列举如表所示。
| 属性 | 意义 | 值 |
|---|---|---|
readonly |
设置是否只读 | 布尔值 |
disabled |
设置是否禁用 | 布尔值 |
clearable |
设置是否清晰显示按钮 | 布尔值 |
size |
设置输入框尺寸 | large small default |
placeholder |
设置占位内容 | 字符串 |
start-placeholder |
在范围选择模式下，设置起始时间的占位内容 | 字符串 |
end-placeholder |
在范围选择模式下，设置结束时间的占位内容 | 字符串 |
is-range |
设置是否为范围选择模式 | 布尔值 |
arrow-control |
设置是否使用箭头进行时间选择 | 布尔值 |
align |
设置对齐方式 | left center right |
range-separator |
设置范围选择时的分隔符 | 字符串 |
format |
显示在输入框的时间格式 | 字符串，默认为HH:mm:ss |
default-value |
设置选择器打开时默认显示的时间 | 时间对象 |
prefix-icon |
设置头部图标 | 字符串 |
clear-icon |
自定义清空图标 | 字符串 |
disabledHours |
禁止选择某些小时 | 函数 |
disabledMinutes |
禁止选择某些分钟 | 函数 |
disabledSeconds |
禁止选择某些秒 | 函数 |
change |
用户选择的值发生变化时触发 | 函数 |
blur |
输入框失去焦点时触发 | 函数 |
focus |
输入框获取焦点时触发 | 函数 |
下面的代码将演示el-time-picker组件的基本使用方法。
html
<el-time-picker
:is-range="true"
v-model="time"
range-separator="~"
:arrow-control="true"
start-placeholder="开始时间"
end-placeholder="结束时间"
>
</el-time-picker>
注意，el-time-picker创建的时间选择器的样式是表格类型的，Element Plus框架中还提供了一个el-time-select组件，这个组件渲染出的选择器是列表样式的。
html
<el-time-select
v-model="value"
style="width: 240px"
start="08:30"
step="00:15"
end="18:30"
placeholder="Select time"
/>
4.2、日期选择器
el-time-picker提供了对时间选择的支持，如果还要选择日期，可以使用el-date-picker组件。此组件会渲染出一个日历视图，用户可以在日历视图上方便地进行日期选择。el-data-picker组件的常用属性列举如表所示。
| 属性 | 意义 | 值 |
|---|---|---|
readonly |
设置是否只读 | 布尔值 |
disabled |
设置是否禁用 | 布尔值 |
editable |
设置本文框是否可编辑 | 布尔值 |
clearable |
设置是否清晰显示按钮 | 布尔值 |
size |
设置输入框组件的尺寸 | large small default |
placeholder |
设置输入框的占位内容 | 字符串 |
start-placeholder |
在范围选择模式下，设置起始日期的占位内容 | 字符串 |
end-placeholder |
在范围选择模式下，设置结束日期的占位内容 | 字符串 |
type |
日历的类型 | year month date dates week datetime datetimerange daterange daterange monthrange |
format |
日期的格式 | 字符串，默认为YYYY-MM-DD |
range-separator |
设置分隔符 | 字符串 |
default-value |
设置默认日期 | Date对象 |
prefix-icon |
设置头部图标 | 字符串 |
clear-icon |
自定义清空图标 | 字符串 |
validate-event |
输入时是否触发表单的校验 | 布尔值 |
disabledDatte |
设置需要禁用的日期 | 函数 |
change |
用户选择的值发生变化时触发 | 函数 |
blur |
输入框失去焦点时触发 | 函数 |
focus |
输入框获取焦点时触发 | 函数 |
el-data-picker组件的简单用法示例如下：
html
<el-date-picker
v-model="date"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
注意，当el-data-picker组件的type属性设置为datatime时，它同时支持选择日期和时间，使用非常方便。
4.3、颜色选择器
颜色选择器能够提供一个调色板组件，用户可以方便地在调色板上进行颜色的选择。在一些场景下，如果页面支持用户进行颜色定制，可以使用颜色选择器组件。颜色选择器使用el-color-picker创建，常用属性列举如表所示。
| 属性 | 意义 | 值 |
|---|---|---|
disabled |
设置是否禁用 | 布尔值 |
size |
设置尺寸 | large small default |
show-alpha |
设置是否支持透明度选择 | 布尔值 |
color-format |
设置颜色格式 | hsl hsv hex rgb |
predefine |
设置预定义颜色 | 数组 |
颜色选择器的简单使用示例如下：
html
<el-color-picker :show-alpha="true" v-model="color"></el-color-picker>
5、提示类组件
Element Plus框架中提供了许多提示类的组件，这类组件在实际开发中应用非常频繁。当我们需要对某些用户的操作做出提示时，就可以使用这类组件。Element Plus框架中提供的提示类组件交互非常友好，主要包括警告组件、加载提示组件、消息提醒组件、通知和弹窗组件等。
5.1、警告组件
警告组件用来在页面上展示重要的提示信息，页面产生错误、用户交互处理产生失败等场景都可以使用警告组件来提示用户。警告组件使用el-alert创建，有4种类型，分别可以使用在操作成功提示、普通信息提示、行为警告提示和操作错误提示场景下。
el-alert警告组件的常用属性列举如表所示。
| 属性 | 意义 | 值 |
|---|---|---|
title |
设置标题 | 字符串 |
type |
设置类型 | success warning info error |
description |
设置描述文案 | 字符串 |
closeable |
设置是否可以关闭提示 | 布尔值 |
center |
设置文本是否居中显示 | 布尔值 |
close-text |
自定义关闭按钮的文本 | 字符串 |
show-icon |
设置是否显示图标 | 布尔值 |
effect |
设置主题 | light dark |
close |
关闭提示时触发的事件 | 函数 |
下面的代码将演示不同类型的警告提示样式。
html
<el-alert title="成功提示的文案" type="success"> </el-alert>
<br />
<el-alert title="消息提示的文案" type="info"> </el-alert>
<br />
<el-alert title="警告提示的文案" type="warning"> </el-alert>
<br />
<el-alert title="错误提示的文案" type="error"> </el-alert>
单击提示栏上的"关闭"按钮，提示栏会自动被消除。
注意，el-alert是一种常驻的提示组件，除非用户手动单击"关闭"按钮，否则提示框不会自动关闭。
5.2、消息提示
5.2.1、简单提示ElMessage
Element Plus中提供了主动触发消息提示的方法，当触发消息提示时，页面顶部会出现一个提示栏，展示3秒后自动消失。简单示例如下：
html
<el-button @click="popTip">弹出信息提示</el-button>实现popTip方法如下：
js
<script setup>
import { ref, watch } from 'vue'
import {ElMessage} from 'element-plus'
function popTip() {
ElMessage({
message: '提示内容',
type: 'warning'
})
}
</script>
ELMessage是Element Plus中内置的方法，将其引入后可以直接使用。此方法的可配置参数列举如表所示。
| 参数名 | 意义 | 值 |
|---|---|---|
message |
设置提示的消息文字 | 字符串或VNode |
type |
设置提示组件的类型 | success warning info error |
duration |
设置展示时间 | 数值，单位为毫秒，默认为3000 |
showClose |
是否展示关闭按钮 | 布尔值 |
center |
设置文字是否居中 | 布尔值 |
onClose |
提示栏关闭时回调的函数 | 函数 |
offset |
设置出现提示栏的位置距离窗口顶部的偏移量 | 数值 |
5.2.2、复杂提示ElMessageBox
ELMessage方法适用于对用户进行简单提示的场景，如果需要进行用户交互，则Element Plus中提供了另一个ELMessageBox方法，此方法类似于系统的alert、confirm和prompt方法，可以进行用户交互。示例代码如下：
js
<script setup>
import { ref, watch } from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
function popTip() {
ElMessageBox({
title: '提示',
message: '详细的提示内容',
type: 'warning',
showCancelButton: true,
showConfirmButton: true,
showInput: true
})
}
</script>
ELMessageBox方法的可配置参数列举如表所示。
| 参数名 | 意义 | 值 |
|---|---|---|
title |
设置提示框标题 | 字符串 |
message |
设置提示框展示的信息 | 字符串 |
type |
设置提示框类型 | success info warning error |
callback |
用户交互的回调，当用户单击提示框上的按钮时触发 | 函数 |
showClose |
设置是否展示关闭按钮 | 布尔值 |
beforeClose |
提示框关闭前的回调 | 函数 |
lockScroll |
是否在提示框出现时将页面滚动锁定 | 布尔值 |
showCancelButton |
设置是否显示取消按钮 | 布尔值 |
showConfirmButton |
设置是否显示确认按钮 | 布尔值 |
cancelButtonText |
自定义取消按钮文本 | 字符串 |
confirmButtonText |
自定义确认按钮的文本 | 字符串 |
closeOnClickModal |
设置是否可以通过单击遮罩关闭当前的提示框 | 布尔值 |
closeOnPressEscape |
设置是否可以通过按ESC键来关闭当前提示框 | 布尔值 |
showInput |
设置是否展示输入框 | 布尔值 |
inputPlaceholder |
设置输入框的占位文案 | 字符串 |
inputValue |
设置输入框的初始文案 | 字符串 |
inputValidator |
设置输入框的校验方法 | 函数 |
inputErrorMessage |
设置校验不通过时展示的文案 | 字符串 |
center |
设置布局是否居中 | 布尔值 |
roundButton |
设置是否使用圆角按钮 | 布尔值 |
5.3、通知组件
通知用来全局地进行系统提示，可以像消息提醒一样出现一定时间后自动关闭，也可以像提示栏那样常驻，只有用户手动才能关闭。在Vue组件中，可以直接调用方法EINotification来触发通知，常用的参数定义列举如表所示。
| 参数名 | 意义 | 值 |
|---|---|---|
title |
设置通知的标题 | 字符串 |
message |
设置通知的内容 | 字符串 |
type |
设置通知的样式 | success warning info error |
duration |
设置通知的显示时间 | 数值，若设置为0，则不会自动消失 |
position |
设置通知的弹出位置 | top-right top-left bottom-right bottom-left |
showClose |
设置是否展示关闭按钮 | 布尔值 |
onClose |
通知关闭时回调的函数 | 函数 |
offset |
设置通知距离页面边缘的偏移量 | 数值 |
示例代码如下：
html
<script setup>
import { ElNotification } from 'element-plus'
function notify() {
ElNotification({
title: '通知标题',
message: '通知内容',
type: 'success',
duration: 3000,
position: 'top-right'
})
}
</script>
<template>
<div style="margin: 20px;">
<el-button @click="notify">弹出通知</el-button>
</div>
</template>
6、数据承载相关组件
6.1、表格组件
表格组件能够承载大量的数据信息。因此，在实际开发中，需要展示大量数据的页面都会使用到表格组件。在Element Plus中，使用el-table与el-table-column组件来构建表格。首先，编写如下示例代码：
html
<template>
<div style="margin: 20px;">
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="subject" label="科目"></el-table-column>
</el-table>
</div>
</template>tableData数据结构如下：
js
<script setup>
import {ref} from 'vue';
const tableData = [
{name: '小王', age: 29, subject: 'Java'},
{name: '小李', age: 30, subject: 'C++'},
{name: '小张', age: 28, subject: 'JavaScript'}
]
</script>其中，el-table-column用来定义表格中的每一列，其prop属性设置此列要渲染的数据对应表格数据中的键名，label属性设置列头信息，代码运行效果如图所示。
el-table和el-table-column组件提供了非常多的属性供开发者进行定制，列举如下。
el-table组件的常用属性表所示。
| 属性 | 意义 | 值 |
|---|---|---|
data |
设置列表的数据源 | 数组 |
height |
设置表格的高度，如果设置了这个属性，表格头会被固定 | 数值 |
max-height |
设置表格的最大高度 | 数值 |
stripe |
设置表格是否有斑马纹，即相邻的行有颜色差异 | 布尔值 |
border |
设置表格是否有边框 | 布尔值 |
size |
设置表格的尺寸 | small large default |
fit |
设置列的宽度是否自适应 | 布尔值 |
show-header |
设置是否显示表头 | 布尔值 |
highlight-current-row |
设置是否高亮显示当前行 | 布尔值 |
row-class-name |
用来设置行的class属性，需要设置为回调函数 | Function({row,rowIndex)可以指定不同的行使用不同的className,返回字符串 |
row-style |
用来设置行的style属性，需要设置为回调函数 | Function(frow,rowIndex)可以指定不同的行使用不同的style,返回样式对象 |
cell-class-name |
用来设置具体单元格的className | Function(frow,column,rowIndex,columnIndex) |
cell-style |
用来设置具体单元格的style属性 | Function(frow,column,rowIndex,columnIndex) |
header-row-class-name |
设置表头行的className | Function(row,rowIndex) |
header-row-style |
设置表头行的style属性 | Function(row,rowIndex) |
header-cell-class-name |
设置表头单元格的className | Function(frow.column.rowIndex.columnIndex) |
header-cell-style |
设置表头单元格的style属性 | Function(frow.column.rowIndex,columnIndex;) |
row-key |
用来设置行的key值 | Function(row) |
empty-text |
设置空数据时展示的占位内容 | 字符串 |
default-expand-all |
设置是否默认展开所有行 | 布尔值 |
expand-row-keys |
设置要默认展开的行 | 数组 |
default-sort |
设置排序方式 | ascending:升序 descending:降序 |
show-summary |
是否在表格尾部显示合计行 | 布尔值 |
sum-text |
设置合计行第一列的文本 | 字符串 |
summary-method |
用来定义合计方法 | Function({columns,data}) |
span-method |
用来定义合并行或列的方法 | Function(row,column,rowIndex, columnIndex) |
lazy |
是否对子节点进行懒加载 | 布尔值 |
load |
数据懒加载方法 | 函数 |
tree-props |
渲染嵌套数据的配置选项 | 对象 |
select |
选中某行数据时回调的函数 | 函数 |
select-all |
全选后回调的函数 | 函数 |
selection-change |
选择项发生变化时回调的函数 | 函数 |
cell-mouse-enter |
鼠标覆盖到单元格时回调的函数 | 函数 |
cell-mouse-leave |
鼠标离开单元格时回调的函数 | 函数 |
cell-click |
当某个单元格被单击时回调的函数 | 函数 |
cell-dblclick |
当某个单元格被双击时回调的函数 | 函数 |
row-click |
当某一行被单击时回调的函数 | 函数 |
row-contextmenu |
当某一行被右击时回调的函数 | 函数 |
row-dblclick |
当某一行被双击时回调的函数 | 函数 |
header-click |
表头被单击时回调的函数 | 函数 |
header-contextmenu |
表头被右击时回调的函数 | 函数 |
sort-change |
排序发生变化时回调的函数 | 函数 |
filter-change |
筛选条件发生变化时回调的函数 | 函数 |
current-change |
表格当前行发生变化时回调的函数 | 函数 |
header-dragend |
拖动表头改变列宽度时回调的函数 | 函数 |
expand-change |
当某一行展开会关闭时回调的函数 | 函数 |
通过表中的属性列表可以看到，el-table组件非常强大，除能够渲染常规的表格外，还支持行列合并、合计、行展开、多选、排序和筛选等，这些功能很多需要结合el-table-column来使用。
el-table-column组件的常用属性列举如表所示。
| 属性 | 意义 | 值 |
|---|---|---|
type |
设置当前列的类型，默认无类型，则为常规的数据列 | selection:多选类型 index:标号类型 expand:展开类型 |
index |
自定义索引 | Function(index) |
column-key |
设置列的key值，用来进行筛选 | 字符串 |
label |
设置显示的标题 | 字符串 |
prop |
设置此列对应的数据字段 | 字符串 |
width |
设置列的宽度 | 字符串 |
min-width |
设置列的最小宽度 | 字符串 |
fixed |
设置此列是否固定，默认不固定 | left:固定左侧 right:固定右侧 |
render-header |
使用函数来渲染列的标题部分 | Function({column,Sindex } |
sortable |
设置对应列是否可排序 | 布尔值 |
sort-method |
自定义数据排序的方法 | 函数 |
sort-by |
设置以哪个字段进行排序 | 字符串 |
resizable |
设置是否可以通过拖动来改变此列的宽度 | 布尔值 |
filter-method |
自定义过滤数据的方法 | 函数 |
6.2、导航菜单组件
导航组件为页面提供导航功能的菜单，导航组件一般出现在页面的顶部或侧面，单击导航组件上不同的栏目页面会对应跳转到指定的页面。在Element Plus中，使用el-menu、el-sub-menu与el-menu-item来定义导航组件。
下面的示例代码将演示顶部导航的基本使用方法。
html
<template>
<div style="margin: 20px;">
<el-menu mode="horizontal">
<el-menu-item index="1">首页</el-menu-item>
<el-sub-menu index="2">
<template #title>广场</template>
<el-menu-item index="2-1">音乐</el-menu-item>
<el-menu-item index="2-2">视频</el-menu-item>
<el-menu-item index="2-3">游戏</el-menu-item>
<el-sub-menu index="2-4">
<template #title>体育</template>
<el-menu-item index="2-4-1">篮球</el-menu-item>
<el-menu-item index="2-4-2">足球</el-menu-item>
<el-menu-item index="2-4-3">排球</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="3" :disabled="true">个人中心</el-menu-item>
<el-menu-item index="4">设置</el-menu-item>
</el-menu>
</div>
</template>如以上代码所示，el-sub-menu的title插槽用来定义子菜单的标题，其内部可以继续嵌套子菜单组件，el-menu组件的mode属性可以设置导航的布局方式为水平或竖直。运行上述代码，效果如图所示。
el-menu组件非常简洁，提供的可配置属性不多，列举如表所示。
| 属性 | 意义 | 值 |
|---|---|---|
mode |
设置菜单模式 | vertical:竖直 horizontal:.水平 |
collapse |
是否水平折叠收起菜单，只在vertical模式下有效 | 布尔值 |
background-color |
设置菜单的背景色 | 字符串 |
text-color |
设置菜单的文字颜色 | 字符串 |
active-text-color |
设置当前菜单激活时的文字颜色 | 字符串 |
default-active |
设置默认激活的菜单 | 字符串 |
default-openeds |
设置默认展开的子菜单，需要设置为子菜单index的列表 | 数组 |
unique-opened |
是否只保持一个子菜单展开 | 布尔值 |
menu-trigger |
设置子菜单展开的触发方式，只在horizontal模式下有效 | hover:鼠标覆盖展开 click:鼠标单击展开 |
router |
是否使用路由模式 | 布尔值 |
collapse-transition |
是否开启折叠动画 | 布尔值 |
select |
选中某个菜单项时回调的函数 | 函数 |
open |
子菜单展开时回调的函数 | 函数 |
close |
子菜单收起时回调的函数 | 函数 |
el-sub-menu组件的常用属性列举如表所示。
| 属性 | 意义 | 值 |
|---|---|---|
index |
唯一标识 | 字符串 |
show-timeout |
设置展开子菜单的延时 | 数值，单位为毫秒 |
hide-timeout |
设置收起子菜单的延时数值，单位为毫秒 | |
disabled |
设置是否禁用 | 布尔值 |
导航组件最重要的作用是进行页面管理，通常我们会结合路由组件进行使用，通过导航与路由，页面的跳转管理会非常简单方便。
6.3、标签页组件
标签组件用来将页面分割成几个部分，单击不同的标签可以对页面内容进行切换。使用el-tabs创建标签页组件的示例代码如下：
html
<template>
<div style="margin: 20px;">
<el-tabs type="border-card">
<el-tab-pane label="页面1" name="1">页面1</el-tab-pane>
<el-tab-pane label="页面2" name="2">页面2</el-tab-pane>
<el-tab-pane label="页面3" name="3">页面3</el-tab-pane>
<el-tab-pane label="页面4" name="4">页面4</el-tab-pane>
</el-tabs>
</div>
</template>代码运行效果如图所示，单击不同的标签将会切换不同的内容。
el-tabs组件的常用属性列表如表所示。
| 属性 | 意义 | 值 |
|---|---|---|
closable |
设置标签是否可关闭 | 布尔值 |
addable |
标签是否可增加 | 布尔值 |
editable |
标签是否可编辑（增加和删除） | 布尔值 |
tab-position |
标签栏所在的位置 | top right bottom left |
stretch |
设置标签是否自动撑开 | 布尔值 |
before-leave |
当标签即将切换时回调的函数 | 函数 |
tab-click |
当某个标签被选中时回调的函数 | 函数 |
tab-remove |
当某个标签被移除时回调的函数 | 函数 |
tab-add |
单击新增标签按钮时回调的函数 | 函数 |
edit |
单击Tab的新增或移除按钮时回调的函数 | 函数 |
el-tab-pane用来定义具体的每个标签卡，常用属性列举如表所示。
| 属性 | 意义 | 值 |
|---|---|---|
label |
设置标签卡的标题 | 字符串 |
disabled |
设置当前标签卡是否禁用 | 布尔值 |
name |
与标签卡绑定的value数据 | 字符串 |
closable |
设置此标签卡 | 布尔值 |
lazy |
设置标签是否延迟渲染 | 布尔值 |
对于el-tab-pane组件，可以通过其内部的label插槽来自定义标题内容。
6.4、抽屉组件
抽屉组件是一种全局的弹窗组件，在流行的网页应用中非常常见。当用户打开抽屉组件时，会从页面的边缘滑出一个内容面板，我们可以灵活地定制内容面板的内容来实现产品的需求。示例代码如下：
html
<script setup>
import {ref} from 'vue';
const drawer = ref(false);
</script>
<template>
<div style="margin: 20px;">
<div style="margin:300px">
<el-button @click="drawer = true" type="primary">
点我打开抽屉
</el-button>
</div>
<el-drawer
title="抽屉面板的标题"
v-model="drawer"
direction="ltr">
抽屉面板的内容
</el-drawer>
</div>
</template>注意，不要忘记在组件的data选项中定义drawer属性控制抽屉的开关。在上述代码中，我们使用按钮控制抽屉的打开，el-drawer组件的direction属性可以设置抽屉的打开方向。运行代码，效果如图所示。
6.5、布局容器组件
布局容器用来方便、快速地搭建页面的基本结构。通过观察当前流行的网站页面，可以发现，它们从布局结构上都是十分相似的。一般都是由头部模块、尾部模块、侧栏模块和主内容模块构成。
在Element Plus中，使用el-container创建布局容器，其内部的子元素一般包括el-header、el-aside、el-main或el-footer。其中：
- el-header定义头部模块
- el-aside定义侧边栏模块
- el-main定义主内容模块
- el-footer定义尾部模块
el-container组件可配置的属性只有一个，如表所示。
| 属性 | 意义 | 值 |
|---|---|---|
direction |
设置子元素的排列方式 | horizontal：水平 vertical：竖直 |
el-header组件和el-footer组件默认会水平撑满页面，可以设置其渲染高度，如表所示。
| 属性 | 意义 | 值 |
|---|---|---|
height |
设置高度 | 字符串 |
el-aside组件的默认高度会撑满页面，可以设置其宽度，如表所示。
| 属性 | 意义 | 值 |
|---|---|---|
width |
设置宽度 | 字符串 |
示例代码如下：
html
<template>
<el-container>
<el-header height="80px" style="background-color: gray;">Header</el-header>
<el-container>
<el-aside width="200px" style="background-color: red;">Aside</el-aside>
<el-container>
<el-main>
<div style="height: 300px; background-color: #f1f1f1;">内容</div>
</el-main>
<el-footer height="80px" style="background-color: gray;">Footer</el-footer>
</el-container>
</el-container>
</el-container>
</template>
7、综合示例
页面设计如下：页面由三部分组成。首先是顶部的标题栏，用于展示当前页面的名称。其次是左侧的侧边栏，用于选择年级和班级。中间的内容区域进一步分为两个部分，上半部分是标题区，显示一些控制按钮，例如"新增学生信息"和"搜索学生信息"；下半部分则展示当前班级的完整学生列表，包括学生的姓名、年龄、性别以及信息添加的日期。页面布局的草图如图所示。
html
<script setup>
import {ref} from 'vue'
const desc = ref('七年级1班学生统计')
const stus = ref([
{name: '小王', age: 14, sex: '男', date: '2020年8月15日'},
{name: '小张', age: 15, sex: '男', date: '2020年5月15日'},
{name: '小秋', age: 15, sex: '女', date: '2020年8月15日'},
])
function selectFunc(index) {
let strs = ['七', '八', '九']
let rank = strs[Math.floor((index - 1) / 3)]
desc.value = `${rank}年级${((index - 1) % 3) + 1}班学生统计`
}
</script>
<style lang="css" scoped>
.header{
font-style: 30px;
line-height: 80px;
background-color: f1f1f1;
}
.aside{
background-color: wheat;
height: 600px;
}
.subHeader{
background-color: cornflowerblue;
}
.desc{
font-style: 25px;
line-height: 80px;
color: white;
width: 800px;
}
.content{
height: 410px;
}
.footer{
height: 410px;
}
.footer{
background-color: dimgray;
color: white;
font-style: 17px;
line-height: 30px;
}
</style>
<template>
<el-container>
<el-header height="80px" style="padding: 0">
<div class="header">教务系统学生管理</div>
</el-header>
<el-container>
<el-aside width="200px">
<el-menu class="aside" @select="selectFunc" default-avtive="1" :unique-opened="true">
<el-sub-menu index="1">
<template #title>
<span>七年级</span>
</template>
<el-menu-item index="1">1班</el-menu-item>
<el-menu-item index="2">2班</el-menu-item>
<el-menu-item index="3">3班</el-menu-item>
</el-sub-menu>
<el-sub-menu index="2">
<template #title>
<span>八年级</span>
</template>
<el-menu-item index="4">1班</el-menu-item>
<el-menu-item index="5">2班</el-menu-item>
<el-menu-item index="6">3班</el-menu-item>
</el-sub-menu>
<el-sub-menu index="3">
<template #title>
<span>九年级</span>
</template>
<el-menu-item index="7">1班</el-menu-item>
<el-menu-item index="8">2班</el-menu-item>
<el-menu-item index="9">3班</el-menu-item>
</el-sub-menu>
</el-menu>
</el-aside>
<el-container>
<el-header height="80px" style="padding:0;margin:0">
<el-container class="subHeader">
<div class="desc">{{ desc }}</div>
<el-button style="width: 100px; height:30px; margin:20px;">新增记录</el-button>
</el-container>
</el-header>
<el-main style="margin: 0; padding: 0">
<div class="content">
<el-table :data="stus">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="sex" label="性别"></el-table-column>
<el-table-column prop="date" label="录入日期"></el-table-column>
</el-table>
</div>
</el-main>
<el-footer height="30px" class="footer">Vue框架搭建，Element Plus提供组件支持</el-footer>
</el-container>
</el-container>
</el-container>
</template>