学历教育网站建设,wordpress版本选择,wordpress wp rewrite,网站开发项目流程书后端数据代码写于下一篇#xff1a;输入搜索、分组展示选项、下拉选取#xff0c;全局跳转页#xff0c;el-select 实现 —— 后端数据处理代码#xff0c;抛砖引玉展思路
【效果图】#xff1a;分组展示选项 【去界面操作感受一下】— 便捷简洁的企业官网 【录制效…后端数据代码写于下一篇输入搜索、分组展示选项、下拉选取全局跳转页el-select 实现 —— 后端数据处理代码抛砖引玉展思路
【效果图】分组展示选项 【去界面操作感受一下】— 便捷简洁的企业官网 【录制效果视频展示】 菜单栏-快速检索1 【流程】
1读取目标数据如果是多个需要多次读取
2对数据进行分组放入特定分组数据结构
3各分组做相应设置
4数据组装到 el-select 控件
5点击选项跳转到相应位置。
现将关键代码及结构附于下方
1. 分组数据结构示例
1标准结构示例
groupSelectOptions2: [{id: 1,label: 超期,options: [{value: cqwbj,label: 超期未办结},{value: ycq,label: 已超期}]},{id: 2,label: 按天,options: [{value: t1,label: 1天},{value: t2,label: 2天},{value: t3,label: 3天}]},{id: 3,label: 按小时,options: [{value: h1,label: 1小时},{value: h2,label: 2小时}]}]
2项目数据结构示例
主要的就 label 和 srcPath 这两个属性其余省略label用于显示srcPath存储选取跳转的 url 地址。
[{label:,options:[{srcPath: }]},
]
2. 封装 el-select 成组件
templatediv styleheight: 15px; justify-content: center; align-items: center;templateel-selectv-modelinnerValuefilterable:remotetrue:likeQueryfalsechangechangeSelect:clearableclearable:multiplemultiple:remote-methodfetchOptionssizesmallpopper-classproductGroupSelector:placeholderplaceholderel-option-group classproductGroupSelector-group v-forgroup in localOptions :keygroup.label :labelgroup.labeldiv style v-ifmultiplediv styleel-checkbox v-modelgroup.checked changeselectAll($event, group.id) :indeterminategroup.isIndeterminate/el-checkbox/divdivel-optionclassproductGroupSelector-optionv-foritem in group.options:keyitem.value:labelitem.label:valueitem/el-option/div/divdiv v-elseel-optionclassproductGroupSelector-optionv-for(item,index) in group.options:keyindex:labelitem.label:valueitem/el-option/div/el-option-group/el-select/template/div
/template
3. javascript 和 css
scriptimport $ from jquery;
import {getRequest} from /api/api;
export default {name: LiloGroupSelect,model: {prop: value,event: change},props: {value: {type: [String, Array],default: () []},options: {type: Array,default: () []},placeholder: {type: String,default: 请选择},multiple: {type: Boolean,default: false},clearable: {type: Boolean,default: false},collapseTags: {type: Boolean,default: false},likeQuery: {type: Boolean,default: false},searchApi: {type: String,default: // 后端搜索API地址}},data() {return {innerValue: this.value,inputValue: ,// 添加这一行来定义 inputValueselectedOption: ,// searchQuery: ,filteredOptions: [],loading: false,allOptions: [], // 存储所有后端返回的选项用于筛选localOptions: [...this.options], // 新增属性用于存储当前选项groupSelectOptions2: [{id: 1,label: 超期,options: [{value: cqwbj,label: 超期未办结},{value: ycq,label: 已超期}]},{id: 2,label: 按天,options: [{value: t1,label: 1天},{value: t2,label: 2天}]},{id: 3,label: 按小时,options: [{value: h1,label: 1小时},{value: h2,label: 2小时}]}],isDropdownVisible: false, // 控制下拉列表的显示状态(默认收起)隐藏};},mounted() {this.innerValue this.value;this.allOptions [...this.options, ...this.groupSelectOptions2]; // 初始化所有选项this.filteredOptions [...this.options]; // 初始化过滤后的选项},watch: {value(newVal, odlVal) {this.innerValue newVal;console.log(当前输入值或选择值this.innerValue)},searchQuery(newVal) {console.log(监听查询输入newVal)this.fetchOptions(newVal);}},methods: {// 模拟后端查询直接返回 groupSelectOptions2fetchOptions(queryString) {console.log(调用后端请求数据....查询条件【queryString】查询接口为this.searchApi)if (this.loading) return;this.loading true;try {// 此处模拟为直接返回 groupSelectOptions2实际应调用后端APIthis.allOptions [...this.options, ...this.groupSelectOptions2]; // 合并原始选项和后端返回的选项去重应在后端处理或此处额外处理if(this.likeQuery) queryString %queryString%;this.getRequest(this.searchApi, {query: queryString}).then(resp {if (resp){this.localOptions [...resp];// console.log(调用后端返回结果JSON.stringify(resp))}});// this.localOptions [...this.groupSelectOptions2]; // 更新 localOptions 而不是 this.options// this.filteredOptions this.filterOptionsByQuery(this.allOptions, queryString);console.log(调用后端数据处理结束。。。)} catch (error) {console.error(搜索失败:, error);} finally {this.loading false;}},async query(queryString){if(this.likeQuery) queryString %queryString%;this.getRequest(this.searchApi, {query: queryString}).then(resp {if (resp){this.localOptions [...resp];}});},filterOptionsByQuery(options, query) {return this.allOptions.reduce((acc, group) {const filteredGroup { ...group, options: group.options.filter(option option.label.toLowerCase().includes(query.toLowerCase())) };// const filteredGroup { ...group, options: group.options.filter(option option.label.includes(query)) };if (filteredGroup.options.length 0) {acc.push(filteredGroup);}return acc;}, []);},selectAll(val, id) {const selectOption this.options.find(f f.id id);const arr selectOption.options.map(m m.value);if (val) {if((typeof this.innerValue ! object) || this.innerValue.constructor ! Array) {this.innerValue [];}arr.forEach(item {if (!this.innerValue.includes(item)) {this.innerValue.push(item);}});} else {this.innerValue.forEach((item, index) {if (arr.includes(item)) {this.innerValue.splice(index, 1, );}});}this.innerValue this.innerValue.filter(f f ! );if (selectOption.checked) {selectOption.isIndeterminate false;}this.$emit(change, this.innerValue);},changeSelect(val) {console.log(选项变更值val)if (this.multiple) {this.options.forEach(item {const arr item.options.map(m m.value);item.isIndeterminate arr.some(v {return val.some(s s v);});item.checked arr.every(v {return val.some(s s v);});if (item.checked) {item.isIndeterminate false;}});this.$emit(change, this.innerValue);} else {this.$emit(change, val);}},}
};
/scriptstyle.productGroupSelector {min-width: initial !important;width: 415px;}
/stylestyle langscss scoped
::v-deep {.el-select-group {width: 400px;display: flex;flex-wrap: wrap;justify-content: start;padding: 0px 10px;}.el-select-group__title {padding-left: 20px;font-size: 12px;}
}.productGroupSelector-group {padding-top: 5px;display: flex;// align-items: center;// flex-wrap: wrap;// width: 400px;padding-bottom: 5px;flex-direction: column;margin: 0 5px;// :not(:last-child) {// border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);// }::after {display: none;}
}.productGroupSelector-option {display: inline-flex;align-items: center;flex-wrap: wrap;
}// .productGroupSelector {
// .el-scrollbar__view .el-select-dropdown__list {
// display: flex;
// flex-wrap: wrap;
// justify-content: space-between;
// align-items: baseline;
// padding-top: 0;
// overflow-x: hidden;
// }
// .el-select-dropdown__wrap .el-scrollbar__wrap {
// max-height: 650px;
// }
// }
/style
4. 引用 LiloGroupSelect
el-row :gutter20 styledisplay: flex; border-radius: 5px; el-col stylemargin-bottom: 7px;lilo-group-select changegroupSelectChange :multiplefalse :likeQuerytrue :searchApi/api/list/search clearable placeholder请输入快速搜索 /lilo-group-select/el-col
/el-rowscript
import LiloGroupSelect from /components/common/help/ElementUIGroupSelect;
export default {name: ***,components: {LiloGroupSelect},data(){return{}},methods: {groupSelectChange(option) {console.log(下拉选项选中JSON.stringify(option));if(option|| option.srcPath)return;// this.$router.push(option.srcPath);this.$router.push(option.srcPath).catch(err {if (err.name ! NavigationDuplicated) {// 处理其他可能的错误console.error(err);}// 对于 NavigationDuplicated 错误可以选择不做任何处理});},}
}【效果图】分组展示选项 参考资源
1. Vue【原创】基于elementui的【分组多选下拉框group-select】 2. el-select选择器组件封装 下拉菜单 elementui 3. Vue Element 分组多选可搜索Select选择器实现示例 4. 基于Vue和Element-UI自定义分组以及分组全选Select 选择器 【项目实际效果】 便捷简洁的企业官网 后端数据代码写于下一篇输入搜索、分组展示选项、下拉选取全局跳转页el-select 实现 —— 后端数据处理代码抛砖引玉展思路
