首先，对于element_ui 的动接，由于需要数据格式是
但是支付宝提的接口返回的数据是另一种格式，并且支付宝的三级联动接口是先只有一个列表，点击列表项再发现请求，生成另外一个下拉选择，需要这个三级联动不能直接使用element-ui的三级联动
思路：
先设三个select 表单，默认第一个表单发出请求，获取第一个下拉列表，当改变时，将改变的值用来做参数，发起一个获取二级的请求请求，当二维改变时再发起第三级列表的数据的请求，由于我这个代码的请求是封装后的请求，直接复制可能运行不了，主要是思路，正面会在说一下通用主代码，大家可能用在自己项目上
<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>