mac_05185 2022-10-07 09:36 采纳率: 67.1%
浏览 456
已结题

antd vue的select选项获取内容传值给后端?

问题:如何根据select的选项传值给后端,并且返回对应后端内容?
我现在做了一个antd vue select的下拉选择,有三个固定值,1代表当前天数据,7代表前7天数据,30则是一个月数据:

img

我的模板布局代码如下:

<a-col :span="5">
    <a-form-model-item :colon='false' label="起始日期"
                                     :labelCol="{lg: {span: 8}, sm: {span: 5}}"
                                     :wrapperCol="{lg: {span: 16}, sm: {span: 17} }">
              <a-select @change="getDateListInfo(2)">
                  <a-select-option v-for=" item in select_date"
                                 :value="item.select_key"
                                 :key="item.select_key"
                                 :label="item.select_val">
                  {{ item.select_val }}
                </a-select-option>
              </a-select>
    </a-form-model-item>
</a-col>

然后我在vue data进行了初始化:

data() {
    return {
      // machineType,

      machineTypeList,
      machineryCategoryList,
      // data,
      data: [],
      columns,
      formData: new FormData(),
      file: {}, // 导入文件数据
      loadingTable: false, // 表格加载
      currentPage: 1,
      brandNamelist: [],
      districtMap: '',
      form: {
        district: '',
        machineType: '',
        emissionStandard: '',
        dayNum: '',
      },

      select_date: [
        {select_key: "01", select_val: "1"},
        {select_key: "02", select_val: "7"},
        {select_key: "03", select_val: "30"},
      ],
      select_date_option: '',

      // 设置分页栏属性
      paginationOpt: {
        defaultCurrent: 1, // 默认当前页数
        defaultPageSize: 10, // 默认当前页显示数据的大小
        total: 0, //总数据条数
        // showQuickJumper: true, //快速跳转
        current: 1,
      },
    }
  },

最后我的接口方法如下:

getDateListInfo(type) {
      console.log(2)
      let self = this
      let param = {}
      //根据不同调用选择不同的currentPage参数
      switch (type) {
        case 1:
          param.currentPage = this.paginationOpt.defaultCurrent
          break
        case 2:
          // 这里就是我要获取select的内容 并且传值给后端,如何实现?
          param.select_date_option = ;
          param.currentPage = ''
          this.currentPage = 1
          break
        default:
          param.currentPage = this.currentPage
      }
      emissionInventory().then(res => {
        // console.log(param)
        console.log(res, '时间段范围查询 <======='</span>)
        self.loadingTable = <span class="hljs-literal">false</span>
        <span class="hljs-keyword">this</span>.paginationOpt.total = res.<span class="hljs-keyword">data</span>.<span class="hljs-keyword">data</span>.pageParam.totalRows
        <span class="hljs-keyword">this</span>.paginationOpt.current = res.<span class="hljs-keyword">data</span>.<span class="hljs-keyword">data</span>.pageParam.currentPage
        <span class="hljs-keyword">this</span>.<span class="hljs-keyword">data</span> = res.<span class="hljs-keyword">data</span>.<span class="hljs-keyword">data</span>.list
        console.log(<span class="hljs-number">3</span>)
        console.log(res.<span class="hljs-keyword">data</span>.<span class="hljs-keyword">data</span>.list)
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < res.<span class="hljs-keyword">data</span>.<span class="hljs-keyword">data</span>.list.length; i++) {
          <span class="hljs-keyword">this</span>.<span class="hljs-keyword">data</span>[i].machineType = machineTypeList[res.<span class="hljs-keyword">data</span>.<span class="hljs-keyword">data</span>.list[i].machineType]
          <span class="hljs-keyword">this</span>.<span class="hljs-keyword">data</span>[i].machineryCategory = machineryCategoryList[<span class="hljs-keyword">this</span>.<span class="hljs-keyword">data</span>[i].machineType][res.<span class="hljs-keyword">data</span>.<span class="hljs-keyword">data</span>.list[i].machineryCategory]
          <span class="hljs-keyword">var</span> emissionStandardList = [
            <span class="hljs-string">'国Ⅰ前',
            '国Ⅰ',
            '国Ⅱ',
            '国Ⅲ',
            '国Ⅳ'
          ]
          this.data[i].standard = emissionStandardList[res.data.data.list[i].standard]
        }
      }, () => {
        self.loadingTable = false
      })
    },
  • 写回答

2条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2022-10-09 23:28
    关注
    不知道你这个问题是否已经解决, 如果还没有解决的话:

    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 10月19日
  • 已采纳回答 10月11日
  • 创建了问题 10月7日

悬赏问题

  • ¥20 C#调用虚拟键盘TabTip.exe
  • ¥15 Qt4代码实现下面的界面
  • ¥15 CCS离散化传递函数与仿真不一致
  • ¥15 prism提示我reinstall prism 如何解决
  • ¥15 asp.core 权限控制怎么做,需要控制到每个方法
  • ¥20 while循环中OLED显示中断中的数据不正确
  • ¥15 这个视频里的stm32f4代码是怎么写的
  • ¥15 JNA调用DLL报堆栈溢出错误(0xC00000FD)
  • ¥15 请教SGeMs软件的使用
  • ¥15 自己用vb.net编写了一个dll文件,如何只给授权的用户使用这个dll文件进行打包编译,未授权用户不能进行打包编译操作?