支付宝小程序的级联选择器，对接简单操作，Cascader 级联选择器element_ui

首先，对于element_ui 的动接，由于需要数据格式是

但是支付宝提的接口返回的数据是另一种格式，并且支付宝的三级联动接口是先只有一个列表，点击列表项再发现请求，生成另外一个下拉选择，

需要这个三级联动不能直接使用element-ui的三级联动。需要自己实现这个功能

 并且支付宝的这个数据是选中数据后再发下一级数据响应的，

思路：

先设三个select 表单，默认第一个表单发出请求，获取第一个下拉列表，当改变时，将改变的值用来做参数，发起一个获取二级的请求请求，当二维改变时再发起第三级列表的数据的请求，由于我这个代码的请求是封装后的请求，直接复制可能运行不了，主要是思路，正面会在说一下通用主代码，大家可能用在自己项目上

关健代码，给每个下拉选择绑定事件，并且事件将变时发出请求

 第二步重点，是支付宝返回数例表中取key和value 的时候,自己先看一下结果在想根据那个做值发起请求。后端需要什么值，请先思考一下，如查你正好有相同需求，这块代码很好懂，如果没有需求，直接看这代码对于新手会蒙，所以需求才是内驱。

<template>
  <div>
    <el-select v-model="firstCategory" placeholder="请选择一级分类" @change="getSecondCategory">
      <el-option v-for="category in firstCategoryList" :key="category.category_id" :value="category.category_id" :label="category.category_name"></el-option>
    </el-select>
    <el-select v-model="secondCategory" placeholder="请选择二级分类" @change="getThirdCategory" v-if="secondCategoryList.length > 0">
      <el-option v-for="category in secondCategoryList" :key="category.category_id" :value="category.category_id" :label="category.category_name"></el-option>
    </el-select>
    <el-select v-model="thirdCategory" placeholder="请选择三级分类" @change="saveThirdCategory" v-if="thirdCategoryList.length > 0">
      <el-option v-for="category in thirdCategoryList" :key="category.category_id" :value="category.category_id" :label="category.category_name"></el-option>
    </el-select>
    <div v-if="thirdCategoryList.length === 0">没有下一级</div>
    <div>输出测试{{ categoryIds }}</div>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  data() {
    return {
      firstCategory: '',
      secondCategory: '',
      thirdCategory: '',
      firstCategoryList: [],
      secondCategoryList: [],
      thirdCategoryList: [],
      categoryIds: []
    };
  },
  created() {
    this.getAlipayMiniCategoryList();
  },
  methods: {
    getAlipayMiniCategoryList() {
      this.request({
        url: '/alipayAccountSettings/getAlipayMiniCategoryList',
        params:{
          category_id:'',
          category:'',
        }
      }).then(resp => {
        this.firstCategoryList = resp.alipayMiniCategoryList
        console.log("第一次获妈值",this.thirdCategoryList)
      }).catch(error => {
        console.log(error);
      });
    },
    getSecondCategory() {
      // 清空后续级别的选择和保存的category_id
      this.secondCategory = '';
      this.thirdCategory = '';
      this.secondCategoryList = [];
      this.thirdCategoryList = [];
      this.categoryIds = [this.firstCategory];
      if (!this.firstCategory) return;
      // 向服务器请求二级数据，传入一级分类的category_id作为请求参数
      this.request({
        url: '/alipayAccountSettings/getAlipayMiniCategoryList',
        category_id: this.firstCategory
      }).then(resp => {
        this.secondCategoryList = resp.alipayMiniCategoryList;
        console.log("第二次获妈值",this.thirdCategoryList)
      }).catch(error => {
        console.log(error);
      });
    },
    getThirdCategory() {
      // 清空后续级别的选择和保存的category_id
      this.thirdCategory = '';
      this.thirdCategoryList = [];
      this.categoryIds = [this.firstCategory, this.secondCategory];
      if (!this.secondCategory) return;
      // 向服务器请求三级数据，传入二级分类的category_id作为请求参数
      this.request({
        url: '/alipayAccountSettings/getAlipayMiniCategoryList',
        category_id: this.secondCategory
      }).then(resp => {
        this.thirdCategoryList = resp.alipayMiniCategoryList;
        console.log("第三次获妈值",this.thirdCategoryList)
      }).catch(error => {
        console.log(error);
      });
    },
    // 三级联动最后一个表单改变时
    saveThirdCategory(){
      this.categoryIds = [this.firstCategory, this.secondCategory, this.thirdCategory];
    }
  }
};
</script>

三级联动选择表单，通过改变时发起下一级请求示例，以下通片的方法

<template>
  <div>
    <el-select v-model="firstCategory" placeholder="请选择一级分类" @change="getSecondCategory">
      <el-option v-for="category in firstCategoryList" :key="category.category_id" :value="category.category_id" :label="category.category_name"></el-option>
    </el-select>
    <el-select v-model="secondCategory" placeholder="请选择二级分类" @change="getThirdCategory" v-if="secondCategoryList.length > 0">
      <el-option v-for="category in secondCategoryList" :key="category.category_id" :value="category.category_id" :label="category.category_name"></el-option>
    </el-select>
    <el-select v-model="thirdCategory" placeholder="请选择三级分类" v-if="thirdCategoryList.length > 0" @change="saveThirdCategory">
      <el-option v-for="category in thirdCategoryList" :key="category.category_id" :value="category.category_id" :label="category.category_name"></el-option>
    </el-select>
    <div v-if="thirdCategoryList.length === 0">没有下一级</div>
    <div>每一级的category_id：{{ categoryIds }}</div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      firstCategory: '',
      secondCategory: '',
      thirdCategory: '',
      firstCategoryList: [],
      secondCategoryList: [],
      thirdCategoryList: [],
      categoryIds: []
    };
  },
  created() {
    this.getAlipayMiniCategoryList();
  },
  methods: {
    getAlipayMiniCategoryList() {
      // 向服务器请求数据
      axios.get('/getAlipayMiniCategoryList')
        .then(response => {
          this.firstCategoryList = response.data.alipayMiniCategoryList;
        })
        .catch(error => {
          console.log(error);
        });
    },
    getSecondCategory() {
      // 清空后续级别的选择和保存的category_id
      this.secondCategory = '';
      this.thirdCategory = '';
      this.secondCategoryList = [];
      this.thirdCategoryList = [];
      this.categoryIds = [this.firstCategory];

      if (!this.firstCategory) return;

      // 向服务器请求二级数据，传入一级分类的category_id作为请求参数
      axios.get('/getSecondCategory', {
          params: {
            category_id: this.firstCategory
          }
        })
        .then(response => {
          this.secondCategoryList = response.data.alipayMiniCategoryList;
        })
        .catch(error => {
          console.log(error);
        });
    },
    getThirdCategory() {
      // 清空后续级别的选择和保存的category_id
      this.thirdCategory = '';
      this.thirdCategoryList = [];
      this.categoryIds = [this.firstCategory, this.secondCategory];

      if (!this.secondCategory) return;

      // 向服务器请求三级数据，传入二级分类的category_id作为请求参数
      axios.get('/getThirdCategory', {
          params: {
            category_id: this.secondCategory
          }
        })
        .then(response => {
          this.thirdCategoryList = response.data.alipayMiniCategoryList;
        })
        .catch(error => {
          console.log(error);
        });
    },
    saveThirdCategory() {
      // 保存第三级的选择到categoryIds数组中
      this.categoryIds = [this.firstCategory, this.secondCategory, this.thirdCategory];
    }
  }
};
</script>