vue+elementui实现三级联动以及axios下载execl文档

前端：废话不多说，直接上代码

 <div class="MonitoringItem">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row :gutter="8" class="center ">
              <el-col :span="10" style="display:flex;">
                <el-form-item label="监测项" label-wight="55">
                  <el-input size="mini" v-model="form.name" placeholder="请输入内容"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" style="display:flex;">
                <el-form-item label="设备" label-wight="55">
                  <!-- 原来的 -->
                  <el-cascader v-model="value" :options="optionsRegion" :props="{ expandTrigger: 'click' }" clearable>
                  </el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="search"> 搜索</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>

<script>
import { getRegionTree, queryDeviceAnalogList, exportData } from '@/api/cardApi'
export default {
  mounted() { },
  created() { },
  destroyed() { },
  data() {
    return {
      optionsRegion: [],
      value: '123',
      tableData: [],
      form: {
        name: '',
        equipment: '',
        Items: '',
        region: '',
        time: '',
      },
    }
  },
  mounted() {
    // 获取下拉框
    this.getRegionTreeFun()

  },
  methods: {
    handleSelectionChange() { },
    // 获取下拉框的
    getRegionTreeFun() {
      getRegionTree('3').then((res) => {
        let resData = res.data.data
        this.optionsRegion.push(...resData)
        let children = resData[0].children[0].children
        if (children) {
          this.value = resData[0].children[0].children[0].value
        } else {
          this.value = resData[0].children[0].children[0].value
        }
      })
      this.handleChange(this.value)
    },
    //获取list的值的
    handleChange(value) {
      this.form.name
      // 什么时候会进入这里呢？
      let val
      if (value.length == 3) {
        val = value[2]
      } else {
        val = value
      }
      debugger
      let params = {
        deviceId: val,
        page: '1',
        limit: '30',
      }
      // 获取列表的
      queryDeviceAnalogList(params).then((res) => {
        if (res.data.code === 0) {
          this.tableData = res.data.data.analogList
        } else if (res.data.code === -1) {
          this.$message({
            type: 'error',
            message: res.data.message,
          })
        }
      })
    },
    //下载实现
    download(data) {
      if (!data) {
        return
      }
      var blob = new Blob([data], { type: 'application/vnd.ms-excel;charset=utf-8' })
      var url = window.URL.createObjectURL(blob);
      var aLink = document.createElement("a");
      aLink.href = url;
      document.body.appendChild(aLink)
      aLink.click()
    },
    exportData1() {
      let params = {
        deviceId: '66',
      }
      exportData(params).then((res) => {
         debugger
        this.download(res.data)
      })
    },

    search() {
      console.log("出发点击事件")
      this.handleChange(this.value);
    },
    exportData2() {
      console.log("出发导出事件")
      this.exportData1()
    },

  },
}
</script>

// 查询后台下载接口 
export function exportData(data) {
  return request({
    url: 'dev/dcfc/analog/export',
    method: 'post',
    data: data,
    responseType: 'arraybuffer', // blob
  })
}

小白一枚， 搞后端的第一次使用VUE，主要记录一下，以便后期查看，