vue：Element：table 筛选功能
element
A Vue.js 2.0 UI Toolkit for Web
项目地址：https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
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: 12px;
padding-top: 20px;
.blue {
color: #337dff;
}
}
</style>
<style lang="scss">
.el-tag {
margin-right: 10px;
}
</style>
|
GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支：3 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
0
0- 0
已为社区贡献4条内容
所有评论(0)