网站手机端生成,wordpress代码格式化,做网站百度一下,wordpress 响应时间注意#xff1a;该功能只能过滤可一次性返回全部数据的表格#xff0c;通过接口分页查询的请自主按照需求改动哈~
实现步骤#xff1a; 1.在要过滤的列表表头增加过滤图标#xff0c;点击图标显示浮窗 2.浮窗内显示整列可选选项#xff0c;通过勾选单选或者全选、搜索框来…注意该功能只能过滤可一次性返回全部数据的表格通过接口分页查询的请自主按照需求改动哈~
实现步骤 1.在要过滤的列表表头增加过滤图标点击图标显示浮窗 2.浮窗内显示整列可选选项通过勾选单选或者全选、搜索框来过滤表格内容 效果如下 表格页面index.vue:
templatediva-table :columnscolumn :data-sourcedata changechangetemplate v-for(col, index) in columnspan :slotcol.slots.title v-ifcol.filterable :keyindex!-- --popover-filter:refpopover_ col.slots.title:keycol.dataIndex:labelcol.dataIndex:fieldcol.dataIndex:shoppingType0:filterscol.filtersListfilterhandleFilterTable/span slot-scopetext, record{{ text }}{{ record }}/span/span/template/a-table/div
/template
script
import PopoverFilter from ./popover-filter.vue;
export default {components: {PopoverFilter},data() {return {column: [],data: [],filters: {},allData: []};},mounted() {const columns [{title: 序号,dataIndex: id,customRender: (text, row, index) {return index 1;},width: 86},{//title: Name,dataIndex: name,width: 20%,slots: { title: name },filterable: true,onFilter: function(value, record) {console.log(value, value);return record.name.indexOf(value) ! -1;}},{//title: Gender,dataIndex: gender,filters: [],width: 20%,filterable: true,slots: { title: gender }},{title: Email,dataIndex: email}];this.column columns;this.data [{ name: jone ke, gender: Male, email: 23293238qq.com },{ name: meary, gender: Male1, email: 23293238qq.com },{ name: lu xi, gender: Doke, email: 23293238qq.com },{ name: jiner, gender: Doke1, email: 23293238qq.com },{ name: geng, gender: Doke1, email: 23293238qq.com }];this.allData [...this.data];//要显示过滤的列dataIndexlet filterList [name, gender];this.column.forEach(item {if (filterList.includes(item.dataIndex)) {//获取每列所有数据去除重复项item.filtersList [...new Set(this.data.map(e e[item.dataIndex]))];}});//console.log(this.column, this.column);},methods: {change(a, b, c) {console.log(a);console.log(b);console.log(c);},handleFilterTable(checkedList, field, label) {console.log(checkedList, field, label);this.filters[field] checkedList;this.data [...this.allData];Object.keys(this.filters).forEach(e {this.data this.data.filter(i this.filters[e].length 0 ? this.filters[e].includes(i[e]) : true);});},changeFilter(checkedList, field) {console.log(checkedList, field);//this.filterInfo[this.typeValue][field] checkedList;}}
};
/script
style langless scoped/style浮窗组件popover-filter.vue
templatediv classfilter-column!-- visibletrue面板显示时或者有勾选项时icon图标高亮 --divclasspopover-title:class{ popover-title-active: visible || this.selected.length }span{{ label }}/spanspan classcaret-wrapperi classsort-caret ascending/ii classsort-caret descending/i/spana-popoveroverlayClassNamepopoverwidth190reffilterpopper-classm-popperv-modelvisibletriggerclick:overlayStyle{ width: 200px }span classfilter-icon click.stophandleClick/spantemplate slotcontenta-inputplaceholder请输入关键词suffix-icona-icon-searchsizesmallinputhandleFilter($event)v-modelkeyWorda-icon slotprefix typesearch //a-inputdiv classpopover-filter v-loadingloadinga-checkbox:indeterminateindeterminate:checkedcheckAllchangehandleCheckAllSource全选{{ filters.length ? ${filters.length} : }}/a-checkboxa-checkbox-groupv-modelcheckedValueclasspopover-checkbox-groupchangehandleChecka-checkboxv-foritem in filterOptions:keyitem:valueitemspan{{ item }}/span/a-checkbox/a-checkbox-group/divdiv classpopover-btn-groupa-buttontypetextsizesmallclasspopover-btn popover-btn-reset:class{ popover-btn-active: checkedValue.length 0 }clickhandleReset重置/a-buttona-buttontypeprimarysizesmallclasspopover-btnclickhandleSearch确定/a-button/div/template/a-popover/div/div
/templatescript
export default {components: {},props: {label: {type: String,default: },field: {type: String,default: },shoppingType: {type: Number,default: 0},filters: {type: Array,default: () []}},data() {return {// 是否显示筛选框showFilter: false,interval: null,keyWord: ,loading: false,// 当前选择项checkedValue: [],selected: [],// 选择项列表options: [],filterOptions: [],checkAll: false,indeterminate: false,visible: false};},watch: {showFilter: {handler(val) {if (val) {this.getList();} else {this.keyWord ;}}}},created() {},mounted() {this.options this.filters;this.filterOptions [...this.options];},methods: {handleClick() {//this.filterOptions [...this.options];//this.$emit(click);this.visible !this.visible;if (this.visible) {//面板显示时回显勾选this.checkedValue [...this.selected];//显示全部勾选项this.getList();//清空搜索框this.keyWord ;//判断全选勾选框状态this.checkAll this.checkedValue.length this.filterOptions.length;this.indeterminate this.checkedValue.length 0 this.checkedValue.length this.filterOptions.length;}},handleFilter() {if (this.interval) {clearTimeout(this.interval);}this.interval setTimeout(() {this.filterOptions this.options.filter(ele ele.toLowerCase().includes(this.keyWord.trim().toLowerCase()));console.log(搜索);clearTimeout(this.interval);this.interval null;}, 1000);},getList() {// this.loading true;// const params {// shoppingType: this.shoppingType,// fieldStr: this.field,// };// this.axios// .post(${this.$baseUrl}/mds/web/shopping/getCartSelect, params)// .then((res) {// this.loading false;// if (res.data.code 200) {// console.log(来源, res);// this.options res.data.data || [];// this.filterOptions [...this.options];// this.selected this.selected.filter(ele this.options.includes(ele));// this.checkedValue [...this.selected];// this.$emit(changeFilter, this.checkedValue, this.field);// }// })// .catch((res) {// this.loading false;// });this.filterOptions [...this.options];},handleCheck(val) {console.log(val, val, this.checkedValue);const count val.length;this.checkAll count this.filterOptions.length;this.indeterminate count 0 count this.filterOptions.length;},handleCheckAllSource() {if (this.checkedValue.length this.filterOptions.length) {this.checkedValue [];this.checkAll false;} else {this.checkedValue this.filterOptions;this.checkAll true;}},handleReset() {this.checkedValue [];this.checkAll false;this.indeterminate false;this.keyWord ;this.filterOptions [...this.options];/* this.$refs.filter.doClose();this.$emit(filter, this.checkedValue, this.field); */},handleSearch() {this.selected [...this.checkedValue];this.visible false;this.$emit(filter, this.checkedValue, this.field, this.label);},close() {this.$refs.filter.doClose();}}
};
/script
style langless scoped
.filter-column {.caret-wrapper {width: 10px;margin: 0 2px 0 8px;.sort-caret {left: 0;}}.popover-title::after {display: none;}.filter-icon {width: 22px;height: 22px;display: inline-block;background: url(../../assets/filter-default.svg) 50% no-repeat;position: absolute;top: 50%;transform: translateY(-50%);margin-left: 4px;cursor: pointer;:hover {background: url(../../assets/filter.svg) 50% no-repeat;background-color: #d3dbea;border-radius: 2px;}}.popover-title-active .filter-icon {background: url(../../assets/filter.svg) 50% no-repeat !important;background-color: #d3dbea !important;border-radius: 2px;}
}
/style
style
.popover .ant-popover-inner-content {padding: 12px;
}
.popover-filter {margin: 8px -12px;padding: 4px 12px;border-top: 1px solid #dee2ed;border-bottom: 1px solid #dee2ed;max-height: 200px;overflow-y: auto;
}
.popover-filter .ant-checkbox-wrapper {margin-left: 0;width: 100%;margin-bottom: 4px;
}
.popover-filter .popover-checkbox-group .ant-checkbox-wrapper {margin-left: 0;width: 100%;margin-bottom: 4px;
}
.popover-btn-group {display: flex;justify-content: space-between;
}
/style
