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

Question

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

我的模板布局代码如下：

<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
      })
    },

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 请看👉 ：【Antd+Vue】解决Antd select框渲染大量数据卡顿问题

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^