河南网站推广,北京移动网站建设公司价格,游戏币销售网站建设,织梦欧美网站模板文章目录 前言一、简介二、效果展示三、源码总结 前言
提示#xff1a;这里可以添加本文要记录的大概内容#xff1a;
…待续 提示#xff1a;以下是本篇文章正文内容#xff0c;下面案例可供参考
一、简介
修改el-table的筛选…待续
二、效果展示 三、源码
使用方法… 文章目录 前言一、简介二、效果展示三、源码总结 前言
提示这里可以添加本文要记录的大概内容
…待续 提示以下是本篇文章正文内容下面案例可供参考
一、简介
修改el-table的筛选…待续
二、效果展示 三、源码
使用方法
el-table-columnaligncenterpropstatus:column-keystatus
template #headerdiv classlayout-center-centerspan路由状态/spantable-filterplaceholder按路由状态搜索filter-keystatussortable:optionsrouteStatusListconfirmhandleFilter:checked-listtempFlow.status_list:sequencetempFlow.sequence/table-filter/div/templatetemplate #default{ row }span v-ifrow.status 0 stylecolor: green[{{ row.status }}]{{ row.status_desc }}/spanspan v-else stylecolor: red[{{ row.status }}]{{ row.status_desc }}/span/template
/el-table-column组件源码
templatediv classtable-filter click.stopel-popoverrefpopoverRefpopper-classtable-filter-boxplacementbottom:width250triggerclickshowhandleShowhidehandleHidetemplate #referenceel-icon v-ifshowParams.showSelectBoxArrowUp //el-iconel-icon v-if!showParams.showSelectBoxArrowDown //el-icon/templatesection classtable-filter-btnsel-inputv-iffilterv-modelsearchKey:placeholderplaceholdersizeminiclassfilte-inputinputsearch/el-divider v-iffilter /el-scrollbar max-height200px refscrollbarRef v-iffilterdivel-checkboxv-modelcheckAlllabel全部sizelargechangeselectAll//divdivclassinfinite-list-itemv-foroption in showOptions:keyoptionel-checkboxv-modeloption.checked:labeloption.labelsizelargechangeselectItem(option.value, option.checked)//div/el-scrollbarel-divider v-iffilter /div v-ifprops.sortableel-checkbox v-modelsortable_asc labelASC /el-checkbox v-modelsortable_desc labelDESC //divel-divider v-ifprops.sortable /section classbtnsel-button typeprimary sizesmall clickhandleConfirm筛选/el-buttonel-buttonsizesmallcolor#ff5722stylecolor: #fffclickhandleCancel取消/el-button/section/section/el-popoverel-icon v-ifcheckedList.length 0Filter //el-iconel-icon v-ifsortable_ascCaretTop //el-iconel-icon v-ifsortable_descCaretBottom //el-icon/div
/templatescript setup
import { defineProps, reactive, ref, watch } from vue;
const props defineProps({placeholder: {},options: {},filterKey: {},checkedList: {type: Array,default: [],},sequence: {},sortable: {type: Boolean,default: false,},filter: {type: Boolean,default: true,},
});
let curCheckedList _.cloneDeep(props.checkedList);
let curSequence props.sequence;
const emit defineEmits([confirm]);const scrollbarRef ref();
const popoverRef ref();
let searchKey ref();
let checkAll ref(true); //默认全选
let showOptions ref([]);
let showParams reactive({showSelectBox: false, //展示下拉框
});
let timer ; //处理输入事件的定时器一次只允许一个定时器存在避免过度刷新造成的卡顿
let timer_ ;
let sortable_asc ref(false);
let sortable_desc ref(false);
let ifDoSearch false; // 是否正在处理输入的数据中...
const init (sequence) {showOptions.value _.cloneDeep(props.options);if (curCheckedList.length props.options.length) {checkAll.value true;} else {checkAll.value false;}if (!sequence) {sortable_asc.value false;sortable_desc.value false;} else if (sequence ASC) {sortable_asc.value true;} else if (sequence DESC) {sortable_desc.value true;}
};
init(curSequence);// 点击全选
const selectAll (checked) {if (checked) {curCheckedList [];showOptions.value showOptions.value.map((item) {item.checked true;curCheckedList.push(item.value);return item;});} else {showOptions.value showOptions.value.map((item) {item.checked false;return item;});curCheckedList [];}
};// 勾选当前选项
const selectItem (id, checked) {if (checked) {curCheckedList.push(id);if (curCheckedList.length props.options.length) {checkAll.value true;}} else {curCheckedList.splice(curCheckedList.indexOf(id), 1);checkAll.value false;}
};/*** desc 确认事件*/
const handleConfirm () {emit(confirm, {key: props.filterKey,checkedList: curCheckedList,sequence: curSequence,});props.checkedList _.cloneDeep(curCheckedList);props.sequence curSequence;popoverRef.value.hide();
};/*** desc 取消事件*/
const handleCancel () {popoverRef.value.hide();curCheckedList _.cloneDeep(props.checkedList);init(props.sequence);
};// 下拉框展示触发的事件
const handleShow (e) {showParams.showSelectBox true;if (props.filter) {scrollbarRef.value.setScrollTop(0);}
};
const handleHide (e) {showParams.showSelectBox false;
};function search(query) {if (ifDoSearch) {clearTimeout(timer);clearTimeout(timer_);}timer setTimeout(filterMethod(query), 0);ifDoSearch true;
}function filterMethod(query) {let tmp [];if (query ! ) {timer_ setTimeout(() {props.options.forEach((item) {if (item.label.toLowerCase().indexOf(query.toLowerCase()) -1 ||item.value -1) {tmp.push(item);}});showOptions.value tmp;}, 0);} else {showOptions.value props.options;}ifDoSearch false;
}watch(() sortable_asc.value,(newValue, oldValue) {if (newValue oldValue) {return;} else if (newValue) {curSequence ASC;sortable_desc.value false;} else if (!newValue) {curSequence ;}}
);watch(() sortable_desc.value,(newValue, oldValue) {if (newValue oldValue) {return;} else if (newValue) {curSequence DESC;sortable_asc.value false;} else if (!newValue) {curSequence ;}}
);
/scriptstyle langless scoped
:deep(.el-divider--horizontal) {margin: 12px 0px;
}
:deep(.el-popper) {padding: 0px;
}
:deep(.el-popover) {padding: 0px;
}
.table-filter {display: inline-block;cursor: pointer;
}
.table-filter-box {height: 25px;line-height: 25px;
}
.table-filter-icon {font: 500;font-size: 18px;
}
.filte-input {width: 100%;
}
.btns {float: right;
}
.infinite-list {padding: 0;margin: 0;list-style: none;
}
/style
。 总结
提示这里对文章进行总结
例如以上就是今天要讲的内容本文仅仅简单介绍了pandas的使用而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
