element plus table 修改过滤图标

禾苗种树

已于 2025-01-02 10:47:40 修改

阅读量332

点赞数 2

分类专栏： UI组件二改文章标签： vue.js elementui

于 2024-12-25 09:40:45 首次发布

本文链接：https://blog.youkuaiyun.com/m0_45011929/article/details/144692217

版权

UI组件二改专栏收录该内容

16 篇文章

订阅专栏

第一种写法

成品
环境：vu3、elementplus，ts（此方法也适用于vue2 element）
注意：使用:deep 前缀修改饿了么样式或者>>>
代码

<el-table  :data="tableData" class="special-filter" >
// ...
</el-table>

//css
	.special-filter{
		:deep .el-icon:before{ // 这个地方的类名需要根据你自己页面的那个类名更换
			display: inline-block;
			font: normal normal normal 14px/1 FontAwesome;
			font-size: inherit;
			text-rendering: auto;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			content: "\f0b0";
			font-size: 18px;
			margin-left: 4px;
		}
	}

第二种写法：在element Plus版本官方给出了修改过滤图表的插槽，不过图标是镂空的，具体选择那种方法看需求，如果不是对图表太苛刻感觉官方的就很方便

环境：vue3 elementPlus，仅适用于Plus版本

<el-table-column  prop="xxxx" label="类型"  :filters="TypeFilter" column-key="Type">
					<template #filter-icon>
						<el-icon :size="16"><Filter /></el-icon>
					</template>
</el-table-column>