Vue第 7 篇，层级控件el-cascader使用详细，clearable删除旧项（el-cascader使用clearable，完全清空，删除旧项，el-cascader在vue中的使用）

前言

el-cascader 是 Element UI 组件库中的一种组件，用于实现级联选择器的功能。级联选择器是一种常见的用户界面元素，通常用于表示有层级关系的数据结构，如国家-省份-城市的选择、文件目录选择等。当用户选择一个选项时，下一个级别的选项会根据前一个选项动态变化，从而形成级联效果。这里来记录一下

---

Vue.js ～ 第 7 篇    ——    在Vue中使用层级控件el-cascader

一. 标签属性

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>

---

二. 参数属性

data() {
    return {
      //地区地址层级数据选择
      searchOptions: [  
        {
          value: "area",
          label: "地区",
          children: [
           //地区层级参数......
             children: [ 地区层级参数...... ],
          ],
        },
        {
          value: "title",
          label: "题目",
        },
      ], 
      subjectValue: "", //主题参数
      searchCon: "", // 搜索框输入的搜索内容
      preTheme: "title", // 上一个主题
      curTheme: "title", // 当前主题
  },

---

三. 选择事件

层级控件的选择事件，请看

  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;
    },

---

四. 搜索事件

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

感觉有用，就一键三连，感谢(●'◡'●)