vue：Element：table 筛选功能

Element UI 中table 有一个筛选功能：筛选择/重置。为了用户体验方法添加一个一键清除的方法，上面要显示选择项的名称，代码未优化，只供参考。基础实现功能。场景：table 列中会出现多列筛选，添加一个一键清除功能。效果图：Template 代码：<div class="table-content"><el-tableref="filterTable":data="bi

帅帅哥的兜兜

4128人浏览 · 2021-05-06 17:19:40

帅帅哥的兜兜 · 2021-05-06 17:19:40 发布

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

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

效果图：

Template 代码：

<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 ) "

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^