VUE+饿了么三级下拉框

一:

<template>

    <div>

        <el-select v-model="classes_1" @change="getDataitemList1()" placeholder="请选择">

            <el-option v-for="item in options" :key="item.value" :label="item.csa_sname" :value="item.csa_sno">

            </el-option>

        </el-select>

        <el-select v-model="classes_2" @change="getDataitemList2()" placeholder="请选择">

            <el-option v-for="item in options1" :key="item.value" :label="item.csb_sname" :value="item.csb_sno">

            </el-option>

        </el-select>

        <el-select v-model="classes_3" @change="getDataitemList3()" placeholder="请选择">

            <el-option v-for="item in options2" :key="item.value" :label="item.csc_sname" :value="item.csc_sno">

            </el-option>

        </el-select>

    </div>

</template>

二:

<script>

import axios from 'axios'

export default {

    data() {

        return {

            dialogFormVisible: false,

            classes_1: "",

            classes_2: "",

            classes_3: "",

            options: [],

            options1: [],

            options2: [],

        }

    },

    mounted() {

        this.getDataitemList();

    },

    methods: {

        getDataitemList() {

            axios.post('http://localhost:8083/cs/abc', {

                dt_sno: 'DT1421'

            }

            )

                .then(res => {

                    this.options = res.data.data,

                        console.log(res.data);

                })

                .catch(function (error) {

                    console.log(error);

                    alert('加载数据失败');

                });

        },

        getDataitemList1() {

            console.log('1111');

            console.log(this.classes_1);

            axios.post('http://localhost:8083/cs/bca', {

                csa_sno: this.classes_1

            }

            )

                .then(res => {

                    this.options1 = res.data.data,

                        console.log(res.data);

                    console.log("6666");  })

                .catch(function (error) { // 请求失败处理

                    console.log(error);

                    alert('加载数据失败');

                });

        },

                getDataitemList2() {

            console.log('1111');

            console.log(this.classes_2);

            axios.post('http://localhost:8083/cs/cba', {

                csb_sno: this.classes_2

            }

            )

                .then(res => {

                    this.options2 = res.data.data,

                        console.log(res.data);

                    console.log("666");

                })

                .catch(function (error) { // 请求失败处理

                    console.log(error);

                    alert('加载数据失败');

                });

        },

        chooseMedicine() {

        }

    }

}

</script>

三:

<style lang="less" scoped>

.el-dropdown {

    vertical-align: top;

}

.el-dropdown+.el-dropdown {

    margin-left: 15px;

}

.el-icon-arrow-down {

    font-size: 12px;

}

</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值