vue下拉菜单从后台获取数据

最新推荐文章于 2023-10-19 14:10:09 发布

feifei_Tang

最新推荐文章于 2023-10-19 14:10:09 发布

阅读量1.1w

点赞数 1

分类专栏： java开发实例 Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/feifei_Tang/article/details/102958641

版权

Vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

java开发实例

5 篇文章

订阅专栏

本文介绍如何在Vue项目中实现下拉菜单，并通过API从后台动态获取数据。详细讲解了vue和api.js的配置及Java后端的数据交互过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue下拉菜单从后台获取数据：
在这里插入图片描述
vue:

<template>
    <section class="trendAnalysis">
        <el-form :inline="true" :model="water" style="margin-left: 10px;" size="small">
            <el-form-item label="站点名称">
                <el-select v-model="water.siteName" placeholder="请选择" style="width: 200px;">
                    <el-option
                            v-for="item in dataOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadWater" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>
    </section>
</template>

<script>
    import {siteNameInfo} from '../../api/api.js'
    import echarts from 'echarts';

    export default {
        data() {
            return {
                water: {
                    siteName: '',
                },
                dataOptions: [],//下拉菜单
            }
        },
        methods: {
            //初始化下拉菜单
            siteNameInfo(){
                let _self = this;
                _self.dataOptions.push({value: '请选择', label: ''});
                siteNameInfo({}).then(response => {
                    response.data.forEach(item => {
                        let arr = {
                            value: item.siteName,
                            label: item.siteName
                        };
                        _self.dataOptions.push(arr);
                    });
                    _self.water.siteName = _self.dataOptions[0].value;
                    _self.loadWater();//调用其他方法，需要写在异步请求中
                });
            },

            loadWater: function () { //加载列表
            },
        },
        mounted(){
            this.siteNameInfo();
        }
    }
</script>
<style lang="less">
</style>

api.js:

/*** 站点名称信息*/
export const siteNameInfo = params => { return axios.post(`${basePath}water/siteNameInfo`, params).then(res => res.data); };

Java：

/*
* 站点名称信息
*/
@RequestMapping(value = "/siteNameInfo")
public ResponseVo<Object> siteNameInfo(){
   ResponseVo<Object> responseVo = new ResponseVo<>();
   QueryWrapper<WaterQuality> qw = new QueryWrapper<>();
   qw.select("siteName");
   qw.groupBy("siteName");
   responseVo.setData(waterQualityService.list(qw));
   return responseVo;
}