element ui 修改table筛选按钮为自定义按钮

别再NULL了

已于 2024-07-30 08:31:04 修改

阅读量333

点赞数 1

分类专栏： css vue elementui 文章标签： vue.js javascript 前端

于 2024-07-30 08:28:18 首次发布

本文链接：https://blog.csdn.net/weixin_39531049/article/details/140786694

版权

vue 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

elementui

1 篇文章 0 订阅

订阅专栏

element ui 修改table筛选按钮为自定义按钮

前些时间做项目的时候，有个需求是，嫌elementui 自定的筛选按钮下拉的小三角不好看，需要自定义按钮。
具体的实现方法如下：

从阿里的图片库引入自己想要的图标。

在需要修改按钮的vue页面里面修改样式

.eTable /deep/ th .cell .el-table__column-filter-trigger .el-icon-arrow-down::before{
	  font-family:"iconfont" !important;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  font-size:18px;
	  font-style:normal;
	  content: "\e621";
	  vertical-align: middle;
}

这样就可以修改了筛选图标了，如果需要全局修改可以在app.vue里面去定义全局样式。