elementUI表格添加表头筛选条件

效果如下：

代码：

        <el-table :data="tableData" style="width: 100%"><el-table-columnlabel="用户名"prop="operationUserName"></el-table-column><el-table-columnlabel="具体操作"prop="operationType"align="center"column-key="tag":filter-multiple="false":filter-method="filterTag":filters="runArr"></el-table-column><el-table-columnlabel="操作时间"prop="operationTime"align="center"column-key="tag":filter-multiple="false":filter-method="filterTagTime":filters="runArrTime"></el-table-column></el-table>

给需要筛选的表头添加以下属性：

:filter-multiple可以决定你是否选择多选，也就是可以选择多个选项进行筛选

            :filter-multiple="false":filter-method="filterTag":filters="runArr"

在data中定义过滤条件

      runArr: [{ text: "录入电子文档", value: "录入电子文档" },{ text: "查看", value: "查看" },{ text: "更新信息", value: "更新信息" },{ text: "下载", value: "下载" },],

在methods写入上面filter-method 绑定的过滤方法 filterTag：

注意：函数里面的这个返回值就是返回你要展示的内容，我上面主要筛选的是具体操作，对应属性名是operationType，因此这里的返回值是 row.operationType，你们需要改成你们在表格中定义的要返回的属性名称。

    filterTag(value, row, column) {return row.operationType === value   //这个返回值就是返回你要展示的内容},

elementUI表格添加表头筛选条件相关推荐

element-ui表格中表头表内容的居中左右对齐
element-ui表格中表头表内容的居中左右对齐第一个是内容第二个是表头
[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选)
[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选) 能够解决的问题在一个完整的数据数据渲染的 elementui 表格组件中,筛选输出数据目录布局代码 ...
Element-UI：el-table 表头筛选
前言需求:根据表头筛选表格符合条件的数据最终实现效果: 情况一:表格没有分页 html 部分: 在列中设置 filters 和 filter-method 属性即可开启该列的筛选. filters ...
element-ui表格实现表头快速筛选
个人感觉这个功能是比较好用,而且项目中极可能用得到的.记录一下踩过的坑. 首先,产品要求能直接在表头进行快速筛选,饿了么的表格筛选又满足不了需求 filter-method这个方法获取到的参数值,会拿 ...
给 element-ui 表格的表头添加icon图标
el-table icon图标的设置,使用 slot="header" 插槽,然后直接通过设置类名为 el-icon-iconName 来使用即可. <el-table-co ...
vue Element-ui 表格自带筛选框自定义高度
el-table中可以在一行的某列进行筛选,代码如下: <el-table-column prop="classOfTest" class="test" ...
elementui表格添加滚动条_如何给PDF文档添加超链接？
有时我们在编辑PDF文档时,需要给目录做快速跳转或给文中的某些内容跳转到其他网页,这就需要用到超链接的功能.下面就一起看看给PDF文档添加超链接的是如何操作的. https://www.zhihu.c ...
element-ui 表格添加校验
html片段 <el-formref="tableFrom"class="tableForm":model="tableFrom":r ...
BJUI+SSM实现报表添加时间筛选功能
场景 BJUI前段报表展示,需要添加时间筛选条件,BJUI传递两个时间与数据库中的某个时间的字段进行比较. 效果实现 BJUI前段jsp页面: <label>开始时间:<input ...

elementUI表格添加表头筛选条件

效果如下：

代码：

给需要筛选的表头添加以下属性：

在data中定义过滤条件

elementUI表格添加表头筛选条件相关推荐

最新文章

热门文章