vue：Element：table 筛选功能

Element UI 中table 有一个筛选功能：筛选择/重置。为了用户体验方法添加一个一键清除的方法，上面要显示选择项的名称， 代码未优化，只供参考。基础实现功能。

 

场景：table 列中会出现多列筛选，添加一个一键清除功能。

 

效果图：

 

 

Template 代码：

<div class="table-content"> <el-table ref="filterTable" :data="billDetailedList" @filter-change="handleFilterChange" > <!-- 产品类型 --> <el-table-column :filters="billProduceList" column-key="resourceTypeList" > < template slot = "header" > 产品类型 < svg-icon icon-class = "icon-combinatorial-screen" class = "icon-svg-current-color search-filter-icon" /> </ template > < template slot-scope = "scope" > < span >{ { handleFormater ( scope . row . resourceType , billProduceList ). text || '--' }}</ span > </ template > </ el-table-column > <!-- 计类费型 --> < el-table-column : filters = " billChargeTypeList " column-key = "chargeTypeList" > < template slot = "header" > 计费类型 < svg-icon icon-class = "icon-combinatorial-screen" class = "icon-svg-current-color search-filter-icon" /> </ template > < template slot-scope = "scope" > < span >{ { handleFormater ( scope . row . chargeType , billChargeTypeList ). text || '--' }}</ span > </ template > </ el-table-column > <!-- 云平台 --> < el-table-column : filters = " platformTypeData " column-key = "platformList" > < template slot = "header" > 云平台 < svg-icon icon-class = "icon-combinatorial-screen" class = "icon-svg-current-color search-filter-icon" /> </ template > < template slot-scope = "scope" > < p >{ { scope . row . _platformName }}</ p > </ template > </ el-table-column > </ el-table > </ div >

效果图流解：

方法 ：methods 中 ，自己封装了个简单的组件，只在实现功能的基础上，并未优化，只提供个人思路，只供参考。

// 筛选 handleFilterChange ( filters ) { const { platformList , chargeTypeList , resourceTypeList , } = filters const { billProduceList , billChargeTypeList , platformTypeData , filterTags } = this ; // 每个筛选条件下拉 let choose = {}, type = '' , kind = '' ; if ( resourceTypeList ) { // 产品类型 this . formInline . resourceTypeList = resourceTypeList . join ( ',' ) kind = '产品类型' ; type = billProduceList ; choose = this . formInline . resourceTypeList } else if ( chargeTypeList ) { // 计费类型 this . formInline . chargeTypeList = chargeTypeList . join ( ',' ) kind = '计费类型' ; type = billChargeTypeList ; choose = this . formInline . chargeTypeList } else { // 云平台 this . formInline . platformList = platformList . join ( ',' ) kind = '云平台' ; type = platformTypeData ; choose = this . formInline . platformList } // 调用组件(筛选tags列表,筛选类型名称,枚举下拉列表,选中参数) this . $refs . screen . handleOpenDialog ( filterTags , kind , type , choose ) }, // 调用筛选后回调(筛选tag列表, 值为‘clearAll’清除所有筛选条件, 选中清除筛选值) handleDone ( newVal , clearAll , clearOne ) { // 筛选tags列表 this . filterTags = newVal ; // 清除所有值 if ( clearAll == 'clearAll' ) { // 置空：查询筛选条件 this . formInline . platformList = '' ; this . formInline . resourceTypeList = '' ; this . formInline . chargeTypeList = '' ; // 清除所有过滤器 this . $refs . filterTable . clearFilter (); } // 清除单个筛选条件 if ( clearOne ) { if ( clearOne . label == '产品类型' ) { // 置空：查询筛选条件 this . formInline . resourceTypeList = '' ; // 清除过滤器 this . $refs . filterTable . clearFilter ( 'resourceTypeList' ); } else if ( clearOne . label == '计费类型' ) { this . formInline . chargeTypeList = '' ; this . $refs . filterTable . clearFilter ( 'chargeTypeList' ); } else if ( clearOne . label == '云平台' ) { this . formInline . platformList = '' ; this . $refs . filterTable . clearFilter ( 'platformList' ); } // 处理值 var index = this . filterTags . indexOf ( clearOne ); this . filterTags . splice ( index , 1 ) } // 调用查询：你自己列表查询的方法 this . handleSearch () },

封装的组件：调用组件请import 引入，在components 中注册，这种基础不清楚自行看文档！！

< template > < div class = 'billPrice' v-if = " filterTags && filterTags . length " > < svg-icon icon-class = "icon-combinatorial-screen" class = "icon-svg-current-color search-filter-icon" /> < el-tag v-for = " tag in filterTags " : key = " tag . value " type = "info" size = "small" closable @ close = " handleClear ( tag ) " > { { tag . label + ":" + tag . value }} </ el-tag > < span class = 'blue' @ click = " handleClearAll " >清除</ span > </ div > </ template >   < script > import common from '@/utils/common.js' export default { data () { return { dialogVisible : false , // 筛选 tags filterTags : [], // 筛选列标题 kind : '' , } }, methods : { // 弹窗打开 handleOpenDialog ( filterTags , kind , type , choose ) { // 筛选 tags this . filterTags = filterTags ; // 筛选列标题 this . kind = kind ; // 筛选赋值 this . handleFilterList ( kind , type , choose ) }, // 筛选：tag 值处理 handleFilterList ( kind , list , name ) { // 更改某个筛选数据值后：删除原先数据 this . filterTags . reduce (( item , next , index ) => { const { label } = next ; //存在即删除 if ( label == kind ) { this . filterTags . splice ( index , 1 ) } }, []) // 格式转换 let arr = name . split ( ',' ); // 生成数据 const newArr = arr . reduce (( item , next ) => { item . push ({ label : kind , value : common . _formater ( next , list ). text }) return item }, []) const tagList = [ ... this . filterTags , ... newArr ] // 去重 let dataInfo = {}; tagList . forEach (( item , index ) => { let { label } = item ; if ( ! dataInfo [ label ]) { dataInfo [ label ] = { label , value : [] }; } dataInfo [ label ]. value . push ( item . value ); }); // 转换成功的数据 let _list = Object . values ( dataInfo ); _list . map (( item , index ) => { item . value = item . value . join ( ',' ) // 点击重置：删除当条数据 if ( ! item . value ) { _list . splice ( index , 1 ) } return item }) // 筛选：tag this . filterTags = _list // 子传父更新的：筛选tag列表 this . $emit ( 'handleSuccess' , this . filterTags ) }, // 筛选: 清除单个 handleClear ( tag ) { // 子传父更新的：筛选tag列表 this . $emit ( 'handleSuccess' , this . filterTags , '' , tag ) }, // 清除所有 handleClearAll () { // 置空 this . filterTags = []; // 子传父更新的：筛选tag列表(筛选tag列表, 值为‘clearAll’清除所有筛选条件, 选中清除筛选值) this . $emit ( 'handleSuccess' , this . filterTags , 'clearAll' ) }, } } </ script > < style lang = "scss" scoped > .billPrice { font-size: 12 px ; padding-top: 20 px ; .blue { color: #337dff ; } } </ style > < style lang = "scss" > .el-tag { margin-right: 10 px ; } </ style >