问题:如何根据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
})
},