Vue 下拉框获取数据

最新推荐文章于 2025-03-18 09:45:21 发布

unsafe-no

最新推荐文章于 2025-03-18 09:45:21 发布

阅读量6.6k

点赞数 1

分类专栏：前端笔记文章标签： vue.js javascript node.js

本文链接：https://blog.youkuaiyun.com/Mr_aswl/article/details/120194609

版权

前端笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Vue中创建一个下拉框组件，实现从数据库获取数据的功能，不依赖路由器。通过组件化思维，抽离响应数据，使组件更便捷。适用于静态数据相同的情况。

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

Vue 使用数据网上很多方法都需要使用到路由器
但是我不太会，于是自己写了一个小组件也可以起到获取数据库数据并返回到 Vue 下拉框的作用

<template>
  <div class="demo">

    <el-select v-model="queryParams"  @change="selectPlatform($event)">
      <el-option  v-for="(item,index) in timeList" :key="index" :value='item.buyType' :label='item.queryParams'>{{item.buyType}}</el-option>
    </el-select>


  </div>
</template>
<script>
import {listTime} from "@/api/SepiMade/ATime/time";

export default {
  created() {
    this.getList()
  },
  data() {
    return {
      value: '',
      selectObj: {}, //选中数据
      timeList: [],
      array: [],
      queryParams: {
        pageNum: 1,
        pageSize: null,
        openDate: null,
        applyDate: null,
        bidDate: null,
        downloadFileDate: null,
        queryFileDate: null,
        openAddress: null,
        editor: null,
        tag: null,
        name: null,
        num: null,
        nuit: null,
        nuitPrice: null,
        price: null,
        content: null,
        contractNo: null,
        contractName: null,
        planNumber: null,
        planName: null,
        projectNumber: null,
        projectName: null,
        buyType: null,
        budget: null,
      },
    }
  },
  methods: {
    selectPlatform(event){
      this.$forceUpdate()//强制更新
      this.value = this.queryParams
      console.log(this.queryParams)
      console.log("value ==="+this.value)
    },
    getList() {
      console.log("TEST 组件触发完成")
      listTime(this.queryParams).then(response => {
        // console.log(response.rows)
        this.timeList = response.rows;

        console.log("TEST[1] 的 buyType 为: "+this.timeList[1].buyType)

        let newFilArr = this.timeList.filter( (item,i) =>{
          console.log("循环==i==",i);
          return item >= this.timeList.length
        })
      });
    },
  }
}
</script>

对于需要下拉相同的 state 来说，你只需要一个初始化的 getList 即可

你可以在控制台打印你的 select 选择值

当然我们也可以使用组件化的思想将这个组件变得更为方便

抽离出 response 的数据使用父组件传入,修改后的组件为

<template>
  <div class="demo">

    <el-select v-model="queryParams"  @change="selectPlatform($event)">
      <el-option  v-for="(item,index) in timeList" :key="index" :value='item.buyType' :label='item.queryParams'>{{item.buyType}}</el-option>
    </el-select>


  </div>
</template>
<script>
import {listTime} from "@/api/SepiMade/ATime/time";

export default {
  created() {
    this.getList()
  },
  data() {
    return {
      value: '',
      selectObj: {}, //选中数据
      timeList: [],
      array: [],
      queryParams: {
        pageNum: 1,
        pageSize: null,
        openDate: null,
        applyDate: null,
        bidDate: null,
        downloadFileDate: null,
        queryFileDate: null,
        openAddress: null,
        editor: null,
        tag: null,
        name: null,
        num: null,
        nuit: null,
        nuitPrice: null,
        price: null,
        content: null,
        contractNo: null,
        contractName: null,
        planNumber: null,
        planName: null,
        projectNumber: null,
        projectName: null,
        buyType: null,
        budget: null,
      },
    }
  },
  methods: {
    selectPlatform(event){
      this.$forceUpdate()//强制更新
      this.value = this.queryParams
      console.log(this.queryParams)
      console.log("value ==="+this.value)
    },
    getList(data) {
      console.log("TEST 组件触发完成")
        this.timeList = data;
    },
  }
}
</script>

        this.$refs.formdata.getList(this.timeList)
        > 父组件的 getList() 中
        <test ref="formdata"/>
        > 向子组件中传 response

我们需要在父组件中传入我们需要的数据,当然这种情况只能用于静态数据相同的情况下，
感觉作用不大