支付宝小程序的级联选择器，对接简单操作，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>
export default {
name: "Cascader",
data() {
return {
firstCategory: '',
secondCategory: '',
thirdCategory: '',
firstCategoryList: [],
secondCategoryList: [],
thirdCategoryList: [],
categoryIds: []
};
},
props: {
url: {
type: String,
required: true
}
},
created() {
this.getAlipayMiniCategoryList();
},
methods: {
getAlipayMiniCategoryList() {
// 向服务器请求一级数据
this.request({
url: this.url,
params: {
category_id: '',
category: '',
}
}).then(resp => {
this.firstCategoryList = resp.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;

// 向服务器请求二级数据
this.request({
url: this.url,
params: {
category_id: this.firstCategory
}
}).then(resp => {
this.secondCategoryList = resp.alipayMiniCategoryList;
}).catch(error => {
console.log(error);
});
},
getThirdCategory() {
// 清空后续级别的选择和保存的category_id
this.thirdCategory = '';
this.thirdCategoryList = [];
this.categoryIds = [this.firstCategory, this.secondCategory];

if (!this.secondCategory) return;

// 向服务器请求三级数据
this.request({
url: this.url,
params: {
category_id: this.secondCategory
}
}).then(resp => {
this.thirdCategoryList = resp.alipayMiniCategoryList;
}).catch(error => {
console.log(error);
});
},
saveThirdCategory() {
this.categoryIds = [this.firstCategory, this.secondCategory, this.thirdCategory];
// 将结果发送到父组件
this.$emit('categoryChange', this.categoryIds);
}
}
};
</script>