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 >
 
 
 
Logo

前往低代码交流专区

更多推荐