首先,对于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>