vue:Element:table 筛选功能

15 篇文章 2 订阅
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 >
 
 
 
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue2 和 Element UI 都是非常流行的前端框架,可以用来快速构建漂亮的用户界面。Element UI 中提供了一个 Table 组件,可以用来展示数据,实现排序、筛选、分页等功能。 在 Vue2 中,使用 Element UI 的 Table 组件需要进行如下步骤: 1. 安装 Element UI 库,可以通过 npm 或者 CDN 方式引入。 2. 在 Vue 组件中引入 Element UI 的 Table 组件,并注册为本地组件。 3. 在组件中定义表格的数据和表头,通过 v-for 指令渲染出表格内容。 4. 配置 Table 组件的属性,包括表头、列的宽度、排序、筛选功能。 5. 最后,将 Table 组件添加到页面中即可。 以下是一个简单的示例代码: ```html <template> <div> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> import { Table, TableColumn } from 'element-ui'; export default { name: 'MyTable', components: { 'el-table': Table, 'el-table-column': TableColumn, }, data() { return { tableData: [ { name: '张三', age: 18, address: '北京市' }, { name: '李四', age: 22, address: '上海市' }, { name: '王五', age: 28, address: '广州市' }, ], }; }, }; </script> ``` 需要注意的是,以上代码只是一个简单的示例,实际应用中还需要根据具体需求进行配置和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值