element二级下拉新手总结

首先先从框架拉代码，是这样的

<div class="block">
  <span class="demonstration">默认 click 触发子菜单</span>
  <el-cascader
    v-model="sel_value"
    :options="options"
    @change="handleChange"></el-cascader>
</div>

然后在data里面定义初始值 

      data() {
         return {
               //层级选择器
              sel_value: [],
              //下拉数据
               options: [],

         }]

然后就是获取后台的值，

 //获取下拉数据
    getSelData(){
      let token = getToken();
      this.$api.userManagerApi
       .getSelDataList(token).then(res=>{
          this.options = res.data;
        }).catch(err=>{
          console.log(err)
        })
    },
    //下拉值发生改变时触发
    handleChange(data){
      if(data[0]==''){
        this.search_sel = data[0];//全部取第一个值
      }else if(data[0]=='null'){
        this.search_sel = '其他';//未知
      }else{
        this.search_sel = data[1];//将第二级的value赋值
      }

    },

这里的 this.$api.userManagerApi  .getSelDataList呢是他项目中的一部分的API里面的某一个模块，从这里获取数据然后赋值在options里面，就是上面的 this.options = res.data;

导出用户列表

   exportUserList() {
      if (this.$refs.managerTable.tableData.length == 0) {
        this.$tip.notify.open({
          type: "info",
          message: `您导出的数据为空，请重新筛选后导出`,
          showClose: true
        });
        return;
      }
      this.exportLoading = true;
      this.splitParams();
      this.$api.userCompanyQuery
        .exportBusinessDetailByType(this.tableInfo.queryParam)
        .then(res => {
          let blob = new Blob([res]);
          let fileName = "用户列表" + Date.now() + ".xls";
          if (navigator.msSaveBlob) {
            navigator.msSaveBlob(blob, fileName);
          } else {
            let downLoadTag = document.createElement("a");
            downLoadTag.href = URL.createObjectURL(blob);
            downLoadTag.download = fileName;
            downLoadTag.style.display = "none";
            document.body.appendChild(downLoadTag);
            downLoadTag.click();
            URL.revokeObjectURL(downLoadTag.href);
            downLoadTag.remove();
          }
        })
        .finally(() => {
          this.exportLoading = false;
        });
      this.getSelData()
    },

 

 splitParams() {
      this.tableInfo.queryParam.userRoles = this.userRoles;
      this.tableInfo.queryParam.searchDateType = this.dateType;
      if (this.createDate != null) {
        this.tableInfo.queryParam.beginTime = this.createDate[0];
        this.tableInfo.queryParam.endTime = this.createDate[1] + " 23:59:59";
      } else {
        this.tableInfo.queryParam.beginTime = "";
        this.tableInfo.queryParam.endTime = "";
      }
      this.tableInfo.queryParam.searchKey = this.searchText.trim();
      this.tableInfo.queryParam.agentId = this.agent;
      this.tableInfo.queryParam.channelId = this.channel;
      this.tableInfo.queryParam.payType = this.entriprisePayType;
      this.tableInfo.queryParam.nsrType = this.nsrType;
      this.tableInfo.queryParam.orderItem = this.tableInfo.defaultSort.prop;
      this.tableInfo.queryParam.isAsc = this.tableInfo.defaultSort.order;

      //新加字段-监听下拉值
      this.tableInfo.queryParam.hy = this.search_sel1;



    },

在页面写而且还要在后台调取

二级下拉与后台交互这里就暂时完了，欢迎参考，欢迎指点呦！！！