Vxe-table表格自定义筛选
vue2自定义类型
需求：需要搜索筛选复选框
- 在src/components新建FilterExtend.vue，内容如下
<template>
<div class="my-filter-excel">
<!-- <div class="my-fe-top">
<ul class="my-fe-menu-group">
<li class="my-fe-menu-link">
<span>升序</span>
</li>
<li class="my-fe-menu-link">
<span>倒序</span>
</li>
</ul>
<ul class="my-fe-menu-group">
<li class="my-fe-menu-link" @click="resetFilterEvent">
<span>清除筛选</span>
</li>
<li class="my-fe-menu-link">
<i class="fa fa-filter my-fe-menu-link-left-icon"></i>
<span>筛选条件</span>
<i class="fa fa-caret-right my-fe-menu-link-right-icon"></i>
<div class="my-fe-menu-child-list">
<ul class="my-fe-child-menu-group-list" v-for="(cList, gIndex) in caseGroups" :key="gIndex">
<li v-for="(cItem, cIndex) in cList" :key="cIndex" class="my-fe-child-menu-item" @click="childMenuClickEvent(cItem)">
<span>{{ cItem.label }}</span>
</li>
</ul>
</div>
</li>
</ul>
</div> -->
<div class="my-fe-search">
<div class="my-fe-search-top">
<vxe-input v-model="option.data.sVal" placeholder="搜索" type="search" clearable></vxe-input>
<i class="fa fa-search my-fe-search-icon"></i>
</div>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAll">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group class="my-fe-search-list" v-model="option.data.vals" @change="handleCheckedGroup">
<el-checkbox :style="{ 'display': 'block' }" v-for="(val, sIndex) in searchList" :label="val"
:key="sIndex">{{ val }}</el-checkbox>
</el-checkbox-group>
</div>
<div class="my-fe-footer">
<vxe-button status="primary" @click="confirmFilterEvent">确认</vxe-button>
<vxe-button @click="resetFilterEvent">重置</vxe-button>
</div>
</div>
</template>
<script>
import XEUtils from 'xe-utils'
/* eslint-disable */
export default {
name: 'FilterExtend',
props: {
params: Object
},
data() {
return {
isIndeterminate: true,
checkAll: false,
column: null,
option: null,
colValList: [],
// caseGroups: [
// [
// { value: 'equal', label: '等于' },
// { value: 'ne', label: '不等于' }
// ],
// [
// { value: 'greater', label: '大于' },
// { value: 'ge', label: '大于或等于' },
// { value: 'less', label: '小于' },
// { value: 'le', label: '小于或等于' }
// ]
// ]
}
},
computed: {
searchList() {
const { option, colValList } = this
return option.data.sVal ? colValList.filter(val => val.toLowerCase().indexOf(option.data.sVal) > -1) : colValList
}
},
// watch: {
// 'option.data.sVal'(val) {
// console.log(val);
// }
// },
created() {
this.load()
},
mounted() {
let checkedCount = this.option.data.vals.length
this.checkAll = checkedCount == this.colValList.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.colValList.length;
},
methods: {
handleCheckAll(value) {
//this.searchList 解决搜索时全选把整个数组都选啦的问题
this.option.data.vals = value ? this.searchList : [];
//this.option.data.vals = value ? this.colValList : [];
this.isIndeterminate = false
},
handleCheckedGroup(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.colValList.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.colValList.length;
},
load() {
const { $table, column } = this.params
const { fullData } = $table.getTableData()
const option = column.filters[0]
// console.log(option);
const colValList = Object.keys(XEUtils.groupBy(fullData, column.property))
this.column = column
this.option = option
this.colValList = colValList
},
sAllEvent() {
const { data } = this.option
if (data.vals.length > 0) {
data.vals = []
} else {
data.vals = this.colValList
}
},
sItemEvent(val) {
const { data } = this.option
const vIndex = data.vals.indexOf(val)
if (vIndex === -1) {
data.vals.push(val)
} else {
data.vals.splice(vIndex, 1)
}
},
confirmFilterEvent(evnt) {
const { params, option } = this
const { data } = option
const { $panel } = params
data.f1 = ''
data.f2 = ''
$panel.changeOption(evnt, true, option)
$panel.confirmFilter()
},
resetFilterEvent() {
const { $panel } = this.params
$panel.resetFilter()
},
childMenuClickEvent(cItem) {
this.$XModal.alert({ content: cItem.label })
}
}
}
</script>
<style>
.my-filter-excel {
user-select: none;
}
.my-filter-excel .my-fe-top .my-fe-menu-group {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.my-filter-excel .my-fe-top .my-fe-menu-group:after {
content: "";
position: absolute;
width: 190px;
right: 0;
bottom: 0;
border-bottom: 1px solid #E2E4E7;
}
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link {
position: relative;
padding: 4px 20px 4px 30px;
cursor: pointer;
}
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link:hover {
background-color: #C5C5C5;
}
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link-left-icon {
position: absolute;
left: 10px;
top: 6px;
}
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link-right-icon {
position: absolute;
right: 10px;
top: 6px;
}
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link:hover .my-fe-menu-child-list {
display: block;
}
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-menu-child-list {
display: none;
position: absolute;
top: 0;
right: -120px;
width: 120px;
background-color: #fff;
border: 1px solid #DADCE0;
box-shadow: 3px 3px 4px -2px rgba(0, 0, 0, 0.6);
}
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list {
position: relative;
}
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list:after {
content: "";
position: absolute;
width: 90px;
right: 0;
bottom: 0;
border-bottom: 1px solid #E2E4E7;
}
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list>.my-fe-child-menu-item {
position: relative;
padding: 4px 20px 4px 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list>.my-fe-child-menu-item:hover {
background-color: #C5C5C5;
}
.my-filter-excel .my-fe-search {
padding: 0 10px 0 30px;
}
.my-filter-excel .my-fe-search .my-fe-search-top {
position: relative;
padding: 5px 0;
}
.my-filter-excel .my-fe-search .my-fe-search-top>input {
border: 1px solid #ABABAB;
padding: 0 20px 0 2px;
width: 200px;
height: 22px;
line-height: 22px;
}
.my-filter-excel .my-fe-search .my-fe-search-top>.my-fe-search-icon {
position: absolute;
right: 5px;
top: 10px;
}
.my-filter-excel .my-fe-search .my-fe-search-list {
width: 100%;
margin: 0;
/* border: 1px solid #E2E4E7; */
padding: 2px 10px;
overflow: auto;
height: 140px;
}
.my-filter-excel .my-fe-search .my-fe-search-list .my-fe-search-item {
cursor: pointer;
padding: 2px 0;
}
.my-filter-excel .my-fe-search .my-fe-search-list .my-fe-search-item .my-fe-search-item-icon {
width: 16px;
}
.my-filter-excel .my-fe-footer {
text-align: right;
padding: 10px 10px 10px 0;
}
.my-fe-popup .my-fe-popup-filter {
padding-left: 30px;
}
.my-fe-popup .my-fe-popup-filter>.my-fe-popup-filter-select {
width: 120px;
}
.my-fe-popup .my-fe-popup-filter>.my-fe-popup-filter-input {
margin-left: 15px;
width: 380px;
}
.my-fe-popup .my-fe-popup-describe {
padding: 20px 0 10px 0;
}
.my-fe-popup .my-fe-popup-concat {
padding-left: 50px;
}
.my-fe-popup .my-fe-popup-footer {
text-align: right;
}
</style>
- 在src/utils下新建VXErender.js，如下
import VXETable from 'vxe-table'
// 创建一个复杂的筛选器 FilterExtend就是 :filter-render="{ name: 'FilterExtend' }" 的name
VXETable.renderer.add('FilterExtend', {
// 不显示底部按钮，使用自定义的按钮
isFooter: false,
// 筛选模板
renderFilter(h, renderOpts, params) {
// console.log(params);
return [
//全局注册的组件
<filter-extend params={params}></filter-extend>
]
},
// 重置数据方法
filterResetMethod({ options }) {
options.forEach(option => {
option.data = { vals: [], sVal: '', fMenu: '', f1Type: '', f1Val: '', fMode: 'and', f2Type: '', f2Val: '' }
})
},
// 筛选数据方法
filterMethod({ option, row, column }) {
const cellValue = row[column.property]
const { vals, f1Type, f1Val } = option.data
if (cellValue) {
if (f1Type) {
return cellValue.indexOf(f1Val) > -1
} else if (vals.length) {
// 通过指定值筛选
return vals.includes(cellValue)
}
}
return false
}
})
- 在main.js下引入组件和自定义渲染
- 在需要的列加上下面的代码
<vxe-column field="address" title="自定义筛选" sortable :filters="[{ data: { vals: [] } }]"
:filter-render="{ name: 'FilterExtend' }"></vxe-column>
这些也是从vex源码中提起的之后根据自己需求改
**一定要安装vxe-table、xe-utils、element-ui，下面是我安装的版本
yarn add xe-utils vxe-table@legacy element-ui
vxetable文档地址