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

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条回答 默认 最新

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

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

      悬赏问题

      • ¥30 VB6.0操作 webview2内核的浏览器如何精确实现网页弹窗处置
      • ¥15 pr导出的视频打不开,提示“缺少编解码器”怎么解决
      • ¥15 html里js获取php参数值不成功,帮改代码
      • ¥20 如何控制ant design的InputNumber组件 最多输入5位小数
      • ¥15 c语言学生基本信息管理系统
      • ¥100 火车头采集器采集求解
      • ¥88 关于#运行时间 时间重叠 和非重叠#的问题,如何解决?
      • ¥15 C语言,密切接触者追踪
      • ¥20 关于计算机网络问题,请附带讲解
      • ¥30 自动识别图像目标并判断