el-cascader层级控件使用详细，clearable删除旧项（el-cascader使用clearable，完全清空，删除旧项）

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:

祝你开心、快乐、幸福、健康、点赞、收藏、关注😀