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-inputv-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-inputv-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-inputv-model="input1"style="width: 240px"placeholder="Pick a date":suffix-icon="Calendar"/><el-inputv-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-inputv-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: stringname: stringaddress: string
}const tableRowClassName = ({row,rowIndex,
}: {row: UserrowIndex: 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-columnprop="date"label="Date"sortablewidth="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-columnprop="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: stringname: stringaddress: stringtag: 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-tableref="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: numberdate: stringname: stringaddress: 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