Element Plus 常用组件
2025/4/1
向全栈工程师迈进!!!
常见Element Plus组件的使用,其文章中“本次我使用到的按钮如下”是我自己做项目时候用到的,记录以加强记忆。阅读时可以跳过。
一、Button按钮
1.1基础按钮
在element plus中提供的按钮种类很多,我们可以使用 type
、plain
、round
和 circle
来定义按钮的样式,如下所示。
1.1.1 其基本代码如下:
<template>
<div 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>
</div>
<div class="mb-4">
<el-button plain>Plain</el-button>
<el-button type="primary" plain>Primary</el-button>
<el-button type="success" plain>Success</el-button>
<el-button type="info" plain>Info</el-button>
<el-button type="warning" plain>Warning</el-button>
<el-button type="danger" plain>Danger</el-button>
</div>
<div class="mb-4">
<el-button round>Round</el-button>
<el-button type="primary" round>Primary</el-button>
<el-button type="success" round>Success</el-button>
<el-button type="info" round>Info</el-button>
<el-button type="warning" round>Warning</el-button>
<el-button type="danger" round>Danger</el-button>
</div>
<div>
<el-button :icon="Search" circle />
<el-button type="primary" :icon="Edit" circle />
<el-button type="success" :icon="Check" circle />
<el-button type="info" :icon="Message" circle />
<el-button type="warning" :icon="Star" circle />
<el-button type="danger" :icon="Delete" circle />
</div>
</template>
<script lang="ts" setup>
import {
Check,
Delete,
Edit,
Message,
Search,
Star,
} from '@element-plus/icons-vue'
</script>
本次我使用到的按钮如下,其属性type为 “primary” 。即第一行的第二个按钮。
<el-button type="primary" @click="handleFilter">
<svg-icon icon-class="search" style="margin-right: 5px" />查询
</el-button>
1.1.2 使用disable属性禁用按钮
<div class="mb-4">
<el-button disabled>Default</el-button>
<el-button type="primary" disabled>Primary</el-button>
<el-button type="success" disabled>Success</el-button>
<el-button type="info" disabled>Info</el-button>
<el-button type="warning" disabled>Warning</el-button>
<el-button type="danger" disabled>Danger</el-button>
</div>
1.2图标按钮
图标按钮如下
<template>
<div>
<el-button type="primary" :icon="Edit" />
<el-button type="primary" :icon="Share" />
<el-button type="primary" :icon="Delete" />
<el-button type="primary" :icon="Search">Search</el-button>
<el-button type="primary">
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
</div>
</template>
<script setup lang="ts">
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
</script>
通过icon属性添加图标,当然要添加的图标需要在script中引入相应的图标。当然引入图标的方式还可以是第5个按钮的引入方式,通过<el-icon> 的方式引入,其<Upload />就是导入的图标组件。通过组件<el-icon>来显示组件。
本次我使用到的按钮如下,其属性type为 “primary” 。通过<svg-icon />的方式添加图标,通过icon-class指定引入图标。
<el-button type="primary" @click="handleCreate">
<svg-icon icon-class="plus" style="margin-right: 5px" />新增
</el-button>
1.3按键组
其显示效果如下
<template>
<el-button-group>
<el-button type="primary" :icon="ArrowLeft">Previous Page</el-button>
<el-button type="primary">
Next Page<el-icon class="el-icon--right"><ArrowRight /></el-icon>
</el-button>
</el-button-group>
<el-button-group class="ml-4">
<el-button type="primary" :icon="Edit" />
<el-button type="primary" :icon="Share" />
<el-button type="primary" :icon="Delete" />
</el-button-group>
</template>
<script setup lang="ts">
import {
ArrowLeft,
ArrowRight,
Delete,
Edit,
Share,
} from '@element-plus/icons-vue'
</script>
首先是使用了<el-button-group></el-button-group>表示是一个按键组,在其内部写多个<el-button>就可以将这些按钮成为一个组。
2、为按钮调节大小
通过size属性调节显示大小。
<template>
<div class="flex flex-wrap items-center mb-4">
<el-button size="large">Large</el-button>
<el-button>Default</el-button>
<el-button size="small">Small</el-button>
<el-button size="large" :icon="Search">Search</el-button>
<el-button :icon="Search">Search</el-button>
<el-button size="small" :icon="Search">Search</el-button>
</div>
<div class="flex flex-wrap items-center mb-4">
<el-button size="large" round>Large</el-button>
<el-button round>Default</el-button>
<el-button size="small" round>Small</el-button>
<el-button size="large" :icon="Search" round>Search</el-button>
<el-button :icon="Search" round>Search</el-button>
<el-button size="small" :icon="Search" round>Search</el-button>
</div>
<div class="flex flex-wrap items-center">
<el-button :icon="Search" size="large" circle />
<el-button :icon="Search" circle />
<el-button :icon="Search" size="small" circle />
</div>
</template>
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
</script>
可以发现,默认显示效果是中等的显示效果,其可以通过改变属性为large或者small来改变显示大小。
二、输入框
2.1输入框的基础用法
<template>
<el-input v-model="input" style="width: 240px" placeholder="Please input" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>
v-model="input" 表示输入数据会和input实现数据双向绑定。placeholder="Please input"
:placeholder
是输入框的一个属性,用于在输入框为空时显示提示文本。当用户开始输入内容时,提示文本会自动消失。
2.2一键清空
使用clearable
属性即可得到一个可一键清空的输入框
<template>
<el-input
v-model="input"
style="width: 240px"
placeholder="Please input"
clearable
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>
如下显示的就是clearable的效果。
2.3密码框
<template>
<el-input
v-model="input"
style="width: 240px"
type="password"
placeholder="Please input password"
show-password
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>
如下显示的就是密码框输入。
2.4带图标的输入框
要在输入框中添加图标,使用 prefix-icon
和 suffix-icon
属性。 另外, prefix
和 suffix
命名的插槽也能正常工作。
<template>
<div class="flex gap-4 mb-4">
<span>Using attributes</span>
<el-input
v-model="input1"
style="width: 240px"
placeholder="Pick a date"
:suffix-icon="Calendar"
/>
<el-input
v-model="input2"
style="width: 240px"
placeholder="Type something"
:prefix-icon="Search"
/>
</div>
<div class="flex gap-4">
<span>Using slots</span>
<el-input v-model="input3" style="width: 240px" placeholder="Pick a date">
<template #suffix>
<el-icon class="el-input__icon"><calendar /></el-icon>
</template>
</el-input>
<el-input
v-model="input4"
style="width: 240px"
placeholder="Type something"
>
<template #prefix>
<el-icon class="el-input__icon"><search /></el-icon>
</template>
</el-input>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Calendar, Search } from '@element-plus/icons-vue'
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const input4 = ref('')
</script>
通过suffix-icon添加图标。
本次我使用到的输入框如下,其绑定的输入数据为listQuery.inspectionCode。
<el-input v-model="listQuery.inspectionCode" v-trim placeholder="请输入检验代码" style="width: 200px" clearable @keyup.enter.native="handleFilter" />
三、Table 表格
3.1基础表格
<template>
<el-table :data="tableData" 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>
<script lang="ts" 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>
<el-table :data="tableData" style="width: 100%">中的:data表示的就是动态注入的数据,在每一列<el-table-column prop="date" label="Date" width="180" />中通过prop="date"再绑定对应对象中的键名。同时label属性是为显示的表格的列名。
3.2带斑马纹表格
在<el-table>中加入 stripe 就可以让表格显示为斑马纹。
<el-table :data="tableData" stripe style="width: 100%">
如下所示
3.3带边框表格
默认情况下,Table 组件是不具有竖直方向的边框的, 如果需要,可以使用 border
属性,把该属性设置为 true
即可启用。
<el-table :data="tableData" border style="width: 100%">
3.4带状态表格
可将表格内容 highlight 显示,方便区分「成功、信息、警告、危险」等内容。
可以通过指定 Table 组件的 row-class-name
属性来为 Table 中的某一行添加 class, 这样就可以自定义每一行的样式了。
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
>
<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>
<script lang="ts" setup>
interface User {
date: string
name: string
address: string
}
const tableRowClassName = ({
row,
rowIndex,
}: {
row: User
rowIndex: number
}) => {
if (rowIndex === 1) {
return 'warning-row'
} else if (rowIndex === 3) {
return 'success-row'
}
return ''
}
const tableData: User[] = [
{
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>
<style>
.el-table .warning-row {
--el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
--el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
- var(--el-color-warning-light-9) 是背景颜色设置为 Element UI 中警告色的浅 9 级变体。
- var(--el-color-success-light-9) 是背景颜色设置为 Element UI 中成功色的浅 9 级变体。
3.5 固定
3.5.1 固定表头
只需要添加上height,就可以实现固定表头的表格。
<el-table :data="tableData" height="250" style="width: 100%">
3.5.2 固定列
通过在<el-table-column fixed prop="date" label="Date" width="150" />添加fixed。就可以实现对某列实现固定。
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column fixed prop="date" label="Date" width="150" />
<el-table-column prop="name" label="Name" width="120" />
<el-table-column prop="state" label="State" width="120" />
<el-table-column prop="city" label="City" width="120" />
<el-table-column prop="address" label="Address" width="600" />
<el-table-column prop="zip" label="Zip" width="120" />
<el-table-column fixed="right" label="Operations" min-width="120">
<template #default>
<el-button link type="primary" size="small" @click="handleClick">
Detail
</el-button>
<el-button link type="primary" size="small">Edit</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script lang="ts" setup>
const handleClick = () => {
console.log('click')
}
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home',
},
{
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office',
},
{
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home',
},
{
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office',
},
]
</script>
3.5.3 固定列和表头
<template>
<el-table :data="tableData" style="width: 100%" height="250">
<el-table-column fixed prop="date" label="Date" width="150" />
<el-table-column prop="name" label="Name" width="120" />
<el-table-column prop="state" label="State" width="120" />
<el-table-column prop="city" label="City" width="320" />
<el-table-column prop="address" label="Address" width="600" />
<el-table-column prop="zip" label="Zip" />
</el-table>
</template>
<script lang="ts" setup>
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
},
{
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
},
{
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
},
{
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
},
{
date: '2016-05-08',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
},
{
date: '2016-05-06',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
},
{
date: '2016-05-07',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
},
]
</script>
3.6 筛选
<template>
<el-button @click="resetDateFilter">reset date filter</el-button>
<el-button @click="clearFilter">reset all filters</el-button>
<el-table ref="tableRef" row-key="date" :data="tableData" style="width: 100%">
<el-table-column
prop="date"
label="Date"
sortable
width="180"
column-key="date"
:filters="[
{ text: '2016-05-01', value: '2016-05-01' },
{ text: '2016-05-02', value: '2016-05-02' },
{ text: '2016-05-03', value: '2016-05-03' },
{ text: '2016-05-04', value: '2016-05-04' },
]"
:filter-method="filterHandler"
/>
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" :formatter="formatter" />
<el-table-column
prop="tag"
label="Tag"
width="100"
:filters="[
{ text: 'Home', value: 'Home' },
{ text: 'Office', value: 'Office' },
]"
:filter-method="filterTag"
filter-placement="bottom-end"
>
<template #default="scope">
<el-tag
:type="scope.row.tag === 'Home' ? 'primary' : 'success'"
disable-transitions
>{{ scope.row.tag }}</el-tag
>
</template>
</el-table-column>
</el-table>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TableColumnCtx, TableInstance } from 'element-plus'
interface User {
date: string
name: string
address: string
tag: string
}
const tableRef = ref<TableInstance>()
const resetDateFilter = () => {
tableRef.value!.clearFilter(['date'])
}
const clearFilter = () => {
tableRef.value!.clearFilter()
}
const formatter = (row: User, column: TableColumnCtx<User>) => {
return row.address
}
const filterTag = (value: string, row: User) => {
return row.tag === value
}
const filterHandler = (
value: string,
row: User,
column: TableColumnCtx<User>
) => {
const property = column['property']
return row[property] === value
}
const tableData: User[] = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Home',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Office',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Home',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Office',
},
]
</script>
筛选出来Tag分别为 Home 或者为 Office 的。通过如下实现
:filters="[ { text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }, ]"
:filter-method="filterTag"
第一个filters是定义过滤器项。通过这个数组可以为列提供多个过滤条件,filter-method
: 定义过滤逻辑的方法。
其定义的过滤函数如下:
const filterTag = (value: string, row: User) => {
return row.tag === value
}
其参数传递到filterTag函数中,其value值是选中的值,然后传递的row就是每一行的数据,row.tag就可以访问到真实的那一行的tag值,若和选中的value相等则返回true则显示该行,否则相反。
为了让Home和Office显示的更加好看,我们可以使用插槽定义其样式,使其看起来更加的好看,定义的内容如下:
<template #default="scope">
<el-tag
:type="scope.row.tag === 'Home' ? 'primary' : 'success'"
disable-transitions
>
{{ scope.row.tag }}
</el-tag>
</template>
type动态绑定显示效果,和Home相等就显示为primary样式,不相等就显示为success样式。disable-transitions是禁用显示的动画效果。{{ scope.row.tag }}
:在标签内部显示当前行的 tag
值。
3.7多选
<template>
<el-table
ref="multipleTableRef"
:data="tableData"
row-key="id"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" :selectable="selectable" width="55" />
<el-table-column label="Date" width="120">
<template #default="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column property="name" label="Name" width="120" />
<el-table-column property="address" label="Address" />
</el-table>
<div style="margin-top: 20px">
<el-button @click="toggleSelection([tableData[1], tableData[2]])">
Toggle selection status of second and third rows
</el-button>
<el-button @click="toggleSelection([tableData[1], tableData[2]], false)">
Toggle selection status based on selectable
</el-button>
<el-button @click="toggleSelection()">Clear selection</el-button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TableInstance } from 'element-plus'
interface User {
id: number
date: string
name: string
address: string
}
const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])
const selectable = (row: User) => ![1, 2].includes(row.id)
const toggleSelection = (rows?: User[], ignoreSelectable?: boolean) => {
if (rows) {
rows.forEach((row) => {
multipleTableRef.value!.toggleRowSelection(
row,
undefined,
ignoreSelectable
)
})
} else {
multipleTableRef.value!.clearSelection()
}
}
const handleSelectionChange = (val: User[]) => {
multipleSelection.value = val
}
const tableData: User[] = [
{
id: 1,
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 2,
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 3,
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 4,
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 5,
date: '2016-05-08',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 6,
date: '2016-05-06',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 7,
date: '2016-05-07',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>
ref="multipleTableRef"
:通过ref
引用表格实例,方便后续对表格进行操作。:data="tableData"
:绑定表格数据,tableData
是一个包含用户信息的数组。row-key="id"
:指定每一行的唯一标识,这里使用id
作为行的键。@selection-change="handleSelectionChange"
:监听表格选择状态的变化,当选择状态改变时触发handleSelectionChange
方法。
embrace my life
embracing my life
特别喜欢的一个英文单词------embrace
difficlulties problems........ just embarcing them peacefully
2025/4/2 CCE