1、el-cascader标签属性:
<el-cascader
v-model="subjectValue"
:options="searchOptions"
:show-all-levels="false"
:props="{ expandTrigger: 'hover' }"
@change="choseTheme"
placeholder="检索类型"
clearable
>
<template slot-scope="{ node, data }">//层级内容数量
<span>{{ data.label }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
2、相关参数属性值:
data() {
return {
//地区地址层级数据选择
searchOptions: [
{
value: "area",
label: "地区",
children: [
//地区层级参数......
children: [ 地区层级参数...... ],
],
},
{
value: "title",
label: "题目",
},
],
subjectValue: "", //主题参数
searchCon: "", // 搜索框输入的搜索内容
preTheme: "title", // 上一个主题
curTheme: "title", // 当前主题
},
3、层级控件的选择事件:
choseTheme(subjectValue) {
//subjectValue是层级控件选中的数据
let Area = subjectValue[0];
if (subjectValue.length === 3) {
//地区>中国**市,三层控件的选择事件
subjectValue = subjectValue[2];
this.searchContent[Area] = subjectValue;
this.choseSearchResult();
//也可以使用this.$set来实现
// this.$set(this.searchContent, Area, subjectValue);
// console.log(subjectValue);
} else if (subjectValue.length === 2) {
//地区>**国,二层控件的选择事件
console.log(this.searchContent);
subjectValue = subjectValue[1];
this.searchContent[Area] = subjectValue;
this.choseSearchResult();
//也可以使用this.$set来实现
// this.$set(this.searchContent, Area, subjectValue);
// console.log(subjectValue);
} else if (subjectValue.length === 1) {
// 删除旧键
let oldKey = this.preTheme;
delete this.searchContent[oldKey];
//检索类型一层 ,删除地区内容
delete this.searchContent.area;
//然后赋值,搜索
this.curTheme = subjectValue;
this.choseSearchResult();
} else if (subjectValue.length === 0) {
//clearable的点击×删除事件
let oldKey = this.preTheme;
// console.log("oldKey", oldKey);
delete this.searchContent[oldKey];
}
//赋值旧值
this.preTheme = subjectValue;
},
4、搜索事件:
choseSearchResult() {
// console.log(this.searchContent);
if (this.searchContent.area) {//如果有地区参数默认title
this.curTheme = "title";
} else {
delete this.searchContent.title;
}
let key = this.curTheme;//赋值搜索
this.searchContent[key] = this.searchCon;
searchKeyword(this.searchContent).then((res) => {//搜索接口
......
});
},
el-select和el-cascader:
祝你开心、快乐、幸福、健康、点赞、收藏、关注😀