一个外国人建设的中国文字网站,大邑网站建设,网站优化软件排名器,ocin wordpress主题一、vxe-table的全局筛选器filters的实现
官网例子#xff1a;https://vxetable.cn/#/table/renderer/filter 进入之后#xff1a;我们可以参照例子自行实现#xff0c;也可以下载它的源码#xff0c;进行调整 下载好后并解压#xff0c;用vscode将解压后的文件打开。全局…一、vxe-table的全局筛选器filters的实现
官网例子https://vxetable.cn/#/table/renderer/filter 进入之后我们可以参照例子自行实现也可以下载它的源码进行调整 下载好后并解压用vscode将解压后的文件打开。全局检索FilterInput你工作中用的vxe-table多少版本的那就进多少版本的目录
点击进入按照这个路劲找到对应文件夹 将filter相关的vue复制到自己的项目中components文件夹下 将filter.tsx 到你的项目中去常用的FilterInput和FilterContent组件将其他的FilterExtend 和FilterComplex 相关的可以先注释掉。
打开filter.ts 这样就可以使用了使用方式按照官网的例子放到columns里即可filters的结构不允许改变他与filterRendes的组件是一一对应的 这里提供v4的相关源码代码 FilterInput.vue
templatediv classmy-filter-inputvxe-input typetext v-modeldemo1.option.data placeholder支持回车筛选 keyupkeyupEvent inputchangeOptionEvent/vxe-input/div
/templatescript langts
import { defineComponent, PropType, reactive } from vue
import { VxeInputEvents, VxeGlobalRendererHandles } from vxe-tableexport default defineComponent({name: FilterInput,props: {params: Object as PropTypeVxeGlobalRendererHandles.RenderFilterParams},setup (props) {const demo1 reactive({option: null as any})const load () {const { params } propsif (params) {const { column } paramsconst option column.filters[0]demo1.option option}}const changeOptionEvent () {const { params } propsconst { option } demo1if (params option) {const { $panel } paramsconst checked !!option.data$panel.changeOption(null, checked, option)}}const keyupEvent: VxeInputEvents.Keyup ({ $event }) {const { params } propsif (params) {const { $panel } paramsif ($event.keyCode 13) {$panel.confirmFilter($event)}}}load()return {demo1,changeOptionEvent,keyupEvent}}
})
/scriptstyle scoped
.my-filter-input {padding: 10px;
}
/style
FilterContent.vue
templatediv classmy-filter-contentdiv classmy-fc-searchdiv classmy-fc-search-topvxe-input v-modeldemo1.option.data.sVal placeholder搜索/vxe-input/divdiv classmy-fc-search-contenttemplate v-ifdemo1.valList.lengthul classmy-fc-search-list my-fc-search-list-headli classmy-fc-search-itemvxe-checkbox v-modeldemo1.isAll changechangeAllEvent全选/vxe-checkbox/li/ulul classmy-fc-search-list my-fc-search-list-bodyli classmy-fc-search-item v-for(item, sIndex) in demo1.valList :keysIndexvxe-checkbox v-modelitem.checked{{ item.value }}/vxe-checkbox/li/ul/templatetemplate v-elsediv classmy-fc-search-empty无匹配项/div/template/div/divdiv classmy-fc-footervxe-button statusprimary clickconfirmFilterEvent确认/vxe-buttonvxe-button clickresetFilterEvent重置/vxe-button/div/div
/templatescript langts
import { defineComponent, PropType, reactive } from vue
import { VxeGlobalRendererHandles } from vxe-table
import XEUtils from xe-utilsexport default defineComponent({name: FilterContent,props: {params: Object as PropTypeVxeGlobalRendererHandles.RenderFilterParams},setup (props) {interface ColValItem {checked: boolean;value: string;}const demo1 reactive({isAll: false,option: null as any,colValList: [] as ColValItem[],valList: [] as ColValItem[]})const load () {const { params } propsif (params) {const { $table, column } paramsconst { fullData } $table.getTableData()const option column.filters[0]const { vals } option.dataconst colValList Object.keys(XEUtils.groupBy(fullData, column.field)).map((val) {return {checked: vals.includes(val),value: val} as ColValItem})demo1.option optiondemo1.colValList colValListdemo1.valList colValList}}const searchEvent () {const { option, colValList } demo1if (option) {demo1.valList option.data.sVal ? colValList.filter((item) item.value.indexOf(option.data.sVal) -1) : colValList}}const changeAllEvent () {const { isAll } demo1demo1.valList.forEach((item) {item.checked isAll})}const confirmFilterEvent () {const { params } propsconst { option, valList } demo1if (params option) {const { data } optionconst { $panel } paramsdata.vals valList.filter((item) item.checked).map((item) item.value)$panel.changeOption(null, true, option)$panel.confirmFilter()}}const resetFilterEvent () {const { params } propsif (params) {const { $panel } params$panel.resetFilter()}}load()return {demo1,searchEvent,changeAllEvent,confirmFilterEvent,resetFilterEvent}}
})
/scriptstyle
.my-filter-content {padding: 10px;user-select: none;
}
.my-filter-content .my-fc-search .my-fc-search-top {position: relative;padding: 5px 0;
}
.my-filter-content .my-fc-search .my-fc-search-top input {border: 1px solid #ABABAB;padding: 0 20px 0 2px;width: 200px;height: 22px;line-height: 22px;
}
.my-filter-content .my-fc-search .my-fc-search-content {padding: 2px 10px;
}
.my-filter-content .my-fc-search-empty {text-align: center;padding: 20px 0;
}
.my-filter-content .my-fc-search-list {margin: 0;padding: 0;list-style: none;
}
.my-filter-content .my-fc-search-list-body {overflow: auto;height: 120px;
}
.my-filter-content .my-fc-search-list .my-fc-search-item {padding: 2px 0;display: block;
}
.my-filter-content .my-fc-footer {text-align: right;padding-top: 10px;
}
.my-filter-content .my-fc-footer button {padding: 0 15px;margin-left: 15px;
}
/style
FilterExtend.vue
templatediv classmy-filter-exceldiv classmy-fe-topul classmy-fe-menu-groupli classmy-fe-menu-linkspan升序/span/lili classmy-fe-menu-linkspan倒序/span/li/ulul classmy-fe-menu-groupli classmy-fe-menu-link clickresetFilterEventspan清除筛选/span/lili classmy-fe-menu-linki classvxe-icon-question-circle-fill my-fe-menu-link-left-icon/ispan筛选条件/spani classvxe-icon-question-circle-fill my-fe-menu-link-right-icon/idiv classmy-fe-menu-child-listul classmy-fe-child-menu-group-list v-for(cList, gIndex) in demo1.caseGroups :keygIndexli v-for(cItem, cIndex) in cList :keycIndex classmy-fe-child-menu-item clickchildMenuClickEvent(cItem)span{{ cItem.label }}/span/li/ul/div/li/ul/divdiv classmy-fe-searchdiv classmy-fe-search-topinput v-modeldemo1.option.data.sVal placeholder搜索/i classvxe-icon-question-circle-fill my-fe-search-icon/i/divul classmy-fe-search-listli classmy-fe-search-item clicksAllEventi classvxe-icon-question-circle-fill my-fe-search-item-icon/ispan(全选)/span/lili classmy-fe-search-item v-for(val, sIndex) in searchList :keysIndex clicksItemEvent(val)i :class[demo1.option.data.vals.indexOf(val) -1 ? vxe-icon-question-circle-fill my-fe-search-item-icon : vxe-icon-question-circle-fill my-fe-search-item-icon]/ispan{{ val }}/span/li/ul/divdiv classmy-fe-footervxe-button statusprimary clickconfirmFilterEvent确认/vxe-buttonvxe-button clickresetFilterEvent重置/vxe-button/div/div
/templatescript langts
import { defineComponent, PropType, reactive, computed } from vue
import { VXETable, VxeGlobalRendererHandles } from vxe-table
import XEUtils from xe-utilsexport default defineComponent({name: FilterExtend,props: {params: Object as PropTypeVxeGlobalRendererHandles.RenderFilterParams},setup (props) {interface CaseItem {label: string;value: string;}const demo1 reactive({option: null as any,colValList: [] as string[],caseGroups: [[{ value: equal, label: 等于 },{ value: ne, label: 不等于 }],[{ value: greater, label: 大于 },{ value: ge, label: 大于或等于 },{ value: less, label: 小于 },{ value: le, label: 小于或等于 }]] as CaseItem[][]})const searchList computed(() {const { option, colValList } demo1if (option) {return option.data.sVal ? colValList.filter(val val.indexOf(option.data.sVal) -1) : colValList}return []})const load () {const { params } propsif (params) {const { $table, column } paramsconst { fullData } $table.getTableData()const option column.filters[0]const colValList Object.keys(XEUtils.groupBy(fullData, column.field))demo1.option optiondemo1.colValList colValList}}const sAllEvent () {const { option } demo1if (option) {const { data } optionif (data.vals.length 0) {data.vals []} else {data.vals demo1.colValList}}}const sItemEvent (val: string) {const { option } demo1if (option) {const { data } optionconst vIndex data.vals.indexOf(val)if (vIndex -1) {data.vals.push(val)} else {data.vals.splice(vIndex, 1)}}}const confirmFilterEvent () {const { params } propsconst { option } demo1if (params option) {const { data } optionconst { $panel } paramsdata.f1 data.f2 $panel.changeOption(null, true, option)$panel.confirmFilter()}}const resetFilterEvent () {const { params } propsif (params) {const { $panel } params$panel.resetFilter()}}const childMenuClickEvent (cItem: CaseItem) {VXETable.modal.alert({ content: cItem.label })}load()return {demo1,searchList,sAllEvent,sItemEvent,confirmFilterEvent,resetFilterEvent,childMenuClickEvent}}
})
/scriptstyle
.my-filter-excel {user-select: none;
}
.my-filter-excel .my-fe-top .my-fe-menu-group {position: relative;margin: 0;padding: 0;
}
.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;padding: 0;
}
.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 {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
FilterComplex.vue
templatediv classmy-filter-complexdiv classmy-fc-typevxe-radio v-modeldemo1.option.data.type namefType labelhas包含/vxe-radiovxe-radio v-modeldemo1.option.data.type namefType labeleq等于/vxe-radio/divdiv classmy-fc-namevxe-input v-modeldemo1.option.data.name typetext placeholder请输入名称 inputchangeOptionEvent()/vxe-input/divdiv classmy-fc-footervxe-button statusprimary clickconfirmEvent确认/vxe-buttonvxe-button clickresetEvent重置/vxe-button/div/div
/templatescript langts
import { defineComponent, PropType, reactive } from vue
import { VxeGlobalRendererHandles } from vxe-tableexport default defineComponent({name: FilterComplex,props: {params: Object as PropTypeVxeGlobalRendererHandles.RenderFilterParams},setup (props) {const demo1 reactive({option: null as any})const load () {const { params } propsif (params) {const { column } paramsconst option column.filters[0]demo1.option option}}const changeOptionEvent () {const { params } propsconst { option } demo1if (params option) {const { $panel } paramsconst checked !!option.data.name$panel.changeOption(null, checked, option)}}const confirmEvent () {const { params } propsif (params) {const { $panel } params$panel.confirmFilter()}}const resetEvent () {const { params } propsif (params) {const { $panel } params$panel.resetFilter()}}load()return {demo1,changeOptionEvent,confirmEvent,resetEvent}}
})
/scriptstyle scoped
.my-filter-complex {width: 260px;padding: 5px 15px 10px 15px;
}
.my-filter-complex .my-fc-type {padding: 8px 0;
}
.my-filter-complex .my-fc-footer {text-align: center;
}
/style
filter.tsx
import { VXETable } from vxe-table
import FilterInput from ./components/FilterInput.vue
import FilterContent from ./components/FilterContent.vue
import FilterComplex from ./components/FilterComplex.vue
import FilterExtend from ./components/FilterExtend.vue// 创建一个简单的输入框筛选
VXETable.renderer.add(FilterInput, {// 筛选模板renderFilter (renderOpts, params) {return FilterInput params{ params }/FilterInput},// 重置数据方法filterResetMethod (params) {const { options } paramsoptions.forEach((option) {option.data })},// 重置筛选复原方法当未点击确认时该选项将被恢复为默认值filterRecoverMethod ({ option }) {option.data },// 筛选方法filterMethod (params) {const { option, row, column } paramsconst { data } optionconst cellValue row[column.field]if (cellValue) {return cellValue.indexOf(data) -1}return false}
})// 创建一个条件的渲染器
VXETable.renderer.add(FilterComplex, {// 不显示底部按钮使用自定义的按钮showFilterFooter: false,// 筛选模板renderFilter (renderOpts, params) {return FilterComplex params{ params }/FilterComplex},// 重置数据方法filterResetMethod (params) {const { options } paramsoptions.forEach((option) {option.data { type: has, name: }})},// 筛选数据方法filterMethod (params) {const { option, row, column } paramsconst cellValue row[column.field]const { name } option.dataif (cellValue) {return cellValue.indexOf(name) -1}return false}
})// 创建一个支持列内容的筛选
VXETable.renderer.add(FilterContent, {// 不显示底部按钮使用自定义的按钮showFilterFooter: false,// 筛选模板renderFilter (renderOpts, params) {return FilterContent params{ params }/FilterContent},// 重置数据方法filterResetMethod (params) {const { options } paramsoptions.forEach((option) {option.data { vals: [], sVal: }})},// 筛选数据方法filterMethod (params) {const { option, row, column } paramsconst { vals } option.dataconst cellValue row[column.field]return vals.includes(cellValue)}
})// 创建一个复杂的筛选器
VXETable.renderer.add(FilterExtend, {// 不显示底部按钮使用自定义的按钮showFilterFooter: false,// 筛选模板renderFilter (renderOpts, params) {return FilterExtend params{ params }/FilterExtend},// 重置数据方法filterResetMethod (params) {const { options } paramsoptions.forEach((option) {option.data { vals: [], sVal: , fMenu: , f1Type: , f1Val: , fMode: and, f2Type: , f2Val: }})},// 筛选数据方法filterMethod (params) {const { option, row, column } paramsconst cellValue row[column.field]const { vals, f1Type, f1Val } option.dataif (cellValue) {if (f1Type) {return cellValue.indexOf(f1Val) -1} else if (vals.length) {// 通过指定值筛选return vals.includes(cellValue)}}return false}
})
二、自行优化filters实现支持字典的转换
通过上面的方式已经实现了过滤器但是多次使用衍生出一个问题就是如果我的列是个字典列并且字典值的转换用的是columns内的solt如FilterContent组件它将会渲染的时字典的value列表并非用户看到的中文列表用户怎么知道你过滤器的看到的123和你的数据时对应的或者时FilterInput 你输入的必须时字典code不能是中文否则将无法筛选出数据。
解决问题1 在数据库查询数据时根据该列关联字典表将中文给转换过来 解决问题2前端查询数据后在给表格赋值时将字典数据转换回来这样有些麻烦 解决问题3优化筛选组件使其支持字典的筛选。由于项目中只用到了FilterInput和FilterContent这里只提供这两个组件的优化。 1. 先说下在哪里做了调整 filtes的结构上做了些调整data里都增加了字典的数据 filterContent 参数移除sval参数同样在filterContent 组件内input筛选也将被移除只保留多选列表进行筛选 FilterInput
“FilterContent.vue”,它与FilterInput不一样需要面板打开时就显示过滤列表
2. 调整后的代码 FilterContent.vue
templatediv classmy-filter-contentdiv classmy-fc-searchdiv classmy-fc-search-top!-- vxe-inputv-modeldemo1.option.data.sValplaceholder搜索/vxe-input --/divdiv classmy-fc-search-contenttemplate v-ifdemo1.valList.lengthul classmy-fc-search-list my-fc-search-list-headli classmy-fc-search-itemvxe-checkbox v-modeldemo1.isAll changechangeAllEvent全选/vxe-checkbox/li/ulul classmy-fc-search-list my-fc-search-list-bodyliv-for(item, sIndex) in demo1.valList:keysIndexclassmy-fc-search-itemvxe-checkbox v-modelitem.checked{{item.label}}/vxe-checkbox/li/ul/templatetemplate v-elsediv classmy-fc-search-empty无匹配项/div/template/div/divdiv classmy-fc-footervxe-button statusprimary clickconfirmFilterEvent确认/vxe-buttonvxe-button clickresetFilterEvent重置/vxe-button/div/div
/templatescript langtsimport { defineComponent, PropType, reactive } from vue;import { VxeGlobalRendererHandles } from vxe-table;import XEUtils from xe-utils;export default defineComponent({name: FilterContent,props: {params: Object as PropTypeVxeGlobalRendererHandles.RenderFilterParams,},setup(props) {interface ColValItem {checked: boolean;value: string;label: string;}const demo1 reactive({isAll: false,option: null as any,colValList: [] as ColValItem[],valList: [] as ColValItem[],});const load () {const { params } props;if (params) {const { $table, column } params;const { fullData } $table.getTableData();const option: any column.filters[0];const { vals } option.data;/** 重置数据解决bug可能由于动态渲染columns导致过滤面板勾选后点击确认按钮过滤后无法更新表格数据* 经过尝试点击重置按钮在进行过滤可正常过滤所以这里重置下data 问题得以解决*/option.data {vals: option.data.vals,// sVal: option.data.sVal,dict: option.data.dict ? option.data.dict : undefined,};if (option.data.dict option.data.dict.length 0) {const colValList Object.keys(XEUtils.groupBy(fullData, column.field)).map((val) {const value option.data.dict.filter((item) String(item.value) String(val));let label val;if (value.length 0) {label value[0].label;}return {checked: vals.includes(val),value: val,label,} as ColValItem;});demo1.option option;demo1.colValList colValList;demo1.valList colValList;} else {const colValList Object.keys(XEUtils.groupBy(fullData, column.field)).map((val) {return {checked: vals.includes(val),value: val,label: val,} as ColValItem;});demo1.option option;demo1.colValList colValList;demo1.valList colValList;}}};// const searchEvent () {// const { option, colValList } demo1;// if (option) {// demo1.valList option.data.sVal// ? colValList.filter(// (item) item.value.indexOf(option.data.sVal) -1// )// : colValList;// }// };const changeAllEvent () {const { isAll } demo1;demo1.valList.forEach((item) {item.checked isAll;});};const confirmFilterEvent () {const { params } props;const { option, valList } demo1;if (params option) {const { data } option;const { $panel } params;data.vals valList.filter((item) item.checked).map((item) item.value);$panel.changeOption(null, true, option);$panel.confirmFilter();}};const resetFilterEvent () {const { params } props;if (params) {const { $panel } params;$panel.resetFilter();}};load();return {demo1,// searchEvent,changeAllEvent,confirmFilterEvent,resetFilterEvent,};},});
/scriptstyle.my-filter-content {padding: 10px;user-select: none;}.my-filter-content .my-fc-search .my-fc-search-top {position: relative;padding: 5px 0;}.my-filter-content .my-fc-search .my-fc-search-top input {border: 1px solid #ababab;padding: 0 20px 0 2px;width: 200px;height: 22px;line-height: 22px;}.my-filter-content .my-fc-search .my-fc-search-content {padding: 2px 10px;}.my-filter-content .my-fc-search-empty {text-align: center;padding: 20px 0;}.my-filter-content .my-fc-search-list {margin: 0;padding: 0;list-style: none;}.my-filter-content .my-fc-search-list-body {overflow: auto;height: 120px;}.my-filter-content .my-fc-search-list .my-fc-search-item {padding: 2px 0;display: block;}.my-filter-content .my-fc-footer {text-align: right;padding-top: 10px;}.my-filter-content .my-fc-footer button {padding: 0 15px;margin-left: 15px;}
/style
FilterInput.vue
templatediv classmy-filter-inputvxe-inputv-modeldemo1.option.data.sValtypetextplaceholder支持回车筛选keyupkeyupEventinputchangeOptionEvent/vxe-input/div
/templatescript langtsimport { defineComponent, PropType, reactive } from vue;import { VxeInputEvents, VxeGlobalRendererHandles } from vxe-table;export default defineComponent({name: FilterInput,props: {params: Object as PropTypeVxeGlobalRendererHandles.RenderFilterParams,},setup(props) {const demo1 reactive({option: null as any,});const load () {const { params } props;if (params) {const { column } params;const option column.filters[0];option.data {sVal: option.data.sVal,dict: option.data.dict ? option.data.dict : undefined,};demo1.option option;}};const changeOptionEvent () {const { params } props;const { option } demo1;if (params option) {const { $panel } params;const checked !!option.data.sVal;$panel.changeOption(null, checked, option);}};const keyupEvent: VxeInputEvents.Keyup ({ $event }) {const { params } props;if (params) {const { $panel } params;if ($event.keyCode 13) {$panel.confirmFilter($event);}}};load();return {demo1,changeOptionEvent,keyupEvent,};},});
/scriptstyle scoped.my-filter-input {padding: 10px;}
/stylefilter.tsx
import { VXETable } from vxe-table;
import FilterInput from /components/Filter/FilterInput.vue;
import FilterContent from /components/Filter/FilterContent.vue;
// import FilterComplex from ./components/FilterComplex.vue
// import FilterExtend from ./components/FilterExtend.vue// 创建一个简单的输入框筛选
VXETable.renderer.add(FilterInput, {// 筛选模板renderFilter: (renderOpts, params) {return [FilterInput params{ params }/FilterInput];},// 重置数据方法filterResetMethod (params) {const { options } params;options.forEach((option) {option.data {sVal: ,dict: option.data.dict ? option.data.dict : undefined,};});},// 重置筛选复原方法当未点击确认时该选项将被恢复为默认值filterRecoverMethod ({ option }) {option.data {sVal: ,dict: option.data.dict ? option.data.dict : undefined,};},// 筛选方法filterMethod (params) {const { option, row, column } params;const { data } option;if(data.dict data.dict.length 0) {const cellValue row[column.field];const dictItem data.dict.filter((item)item.label.indexOf(data.sVal) -1).map((item) item.value);if(dictItem.length 0){return dictItem.indexOf(cellValue) -1;}} else {const cellValue row[column.field];if (cellValue) {return cellValue.indexOf(data.sVal) -1;}}return false;},
});// // 创建一个条件的渲染器
// VXETable.renderer.add(FilterComplex, {
// // 不显示底部按钮使用自定义的按钮
// showFilterFooter: false,
// // 筛选模板
// renderFilter (renderOpts, params) {
// return FilterComplex params{ params }/FilterComplex
// },
// // 重置数据方法
// filterResetMethod (params) {
// const { options } params
// options.forEach((option) {
// option.data { type: has, name: }
// })
// },
// // 筛选数据方法
// filterMethod (params) {
// const { option, row, column } params
// const cellValue row[column.field]
// const { name } option.data
// if (cellValue) {
// return cellValue.indexOf(name) -1
// }
// return false
// }
// })// 创建一个支持列内容的筛选
VXETable.renderer.add(FilterContent, {// 不显示底部按钮使用自定义的按钮showFilterFooter: false,// 筛选模板renderFilter (renderOpts, params) {return [FilterContent params{ params }/FilterContent];},// 重置数据方法filterResetMethod (params) {const { options } params;options.forEach((option) {option.data { vals: [],dict: option.data.dict ? option.data.dict : undefined};});},// 筛选数据方法filterMethod (params) {const { option, row, column } params;const { vals } option.data;const cellValue row[column.field];console.log(cellValue,vals.includes(cellValue))return vals.includes(cellValue);},
});// // 创建一个复杂的筛选器
// VXETable.renderer.add(FilterExtend, {
// // 不显示底部按钮使用自定义的按钮
// showFilterFooter: false,
// // 筛选模板
// renderFilter (renderOpts, params) {
// return FilterExtend params{ params }/FilterExtend
// },
// // 重置数据方法
// filterResetMethod (params) {
// const { options } params
// options.forEach((option) {
// option.data { vals: [], sVal: , fMenu: , f1Type: , f1Val: , fMode: and, f2Type: , f2Val: }
// })
// },
// // 筛选数据方法
// filterMethod (params) {
// const { option, row, column } params
// const cellValue row[column.field]
// 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
// }
// })
