现在下拉框和时间选择框都没有默认给getRequisitionApi接口值,而且当我选择一个后再选另一个,前面选择的值又不见了。
怎么让下拉框和时间选择框默认都给值。选择第一个后再选择另一个,前面选择的值还在
<div class="type-select">
<el-select @change="changeType" v-model="typeValue" placeholder="钢筋" size="mini">
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</div>
<div class="changeYear">
<el-date-picker
v-model="year3"
type="year"
prefix-icon="el-icon-arrow-down"
placeholder="选择年"
@change="getData2"
value-format="yyyy"
:clearable="false"
></el-date-picker>
</div>
data() {
return {
typeValue: "",
year3: "2023",
options: [],
};
},
mounted() {
this.getEquipmentAlarmApi();
this.init();
this.getRequisitionApi()
},
methods: {
getData2(year3){
this.getRequisitionApi(year3)
},
changeType(id){
console.log(id,88888888777777)
this.getRequisitionApi(id)
},
getEquipmentAlarmApi() {
getCategoryApi().then((res) => {
if (res.code === 200) {
this.options = res.result;
}
});
},
getRequisitionApi(typeValue= 1572464512223326209,year3){
let data = {
projectSn: this.$store.state.projectSn,
categoryId: typeValue,
year: year3
};
getRequisitionApi(data).then((res) => {
if (res.code === 200) {
this.option = res.result;
}
});
},
}
【以下回答由 GPT 生成】
问题的解决方案如下所示:
getRequisitionApi
函数首先,我们需要实现getRequisitionApi
函数,该函数需要通过API调用获取接口数据,并将其赋值给options
数组。在获取数据之后,我们需要将适当的默认值赋给typeValue
和year3
。
控制器中的实现代码如下所示:
methods: {
async getRequisitionApi(year3) {
try {
// 发起API调用,获取接口数据
const response = await axios.get('your-api-url');
const data = response.data;
// 将接口数据赋值给options数组
this.options = data;
// 如果year3已经被改变,则直接返回
if (year3) {
return;
}
// 设置默认值为第一个选项的id
this.typeValue = this.options[0].id;
// 设置默认年份
this.year3 = "2023";
// 根据默认选项获取数据
this.getData2(this.year3);
} catch (error) {
console.error(error);
}
},
// 其他方法...
}
changeType
和其他相关方法根据您提供的代码,changeType
方法可能用于在选择不同的选项时触发事件。您可以根据具体需求在changeType
方法中编写逻辑。如果您需要在选择不同的选项时保留之前选择的year3
值,可以参考下面的示例代码:
methods: {
changeType() {
// 在这里编写根据选择的选项执行的逻辑
// 不需要重新设置year3的值
// 其他逻辑...
},
// 其他方法...
}
根据您的描述,您希望下拉框和日期选择框具有默认值,并且在选择第一个选项后仍保留之前选择的值。
在代码中,我们使用mounted
生命周期钩子调用getRequisitionApi
函数来获取接口数据并设置默认值。但是默认值只会在mounted
阶段设置一次,而不会在选择选项后保留之前的值。
如果您希望选定选项后保留之前选择的值,可以修改changeType
方法,将year3
的值存储在一个变量中。然后在设置选定选项的默认值后,将之前存储的year3
值重新赋给year3
。
例如,可以在changeType
方法中添加以下代码:
methods: {
changeType() {
// 在这里编写根据选择的选项执行的逻辑
const previousYear3 = this.year3;
// 设置默认的选项值
// 其他逻辑...
// 将之前存储的year3值重新赋给year3
this.year3 = previousYear3;
},
// 其他方法...
}
这样,当您选择一个选项后再选择另一个选项时,之前选择的year3
值将保留下来。
请注意,以上提供的代码仅作为示例,并且需要根据您实际的业务逻辑进行相应的修改和调整。
希望以上的解决方案能够解决您的问题。如果您有任何其他问题,请随时提问。
如果你的接口想要两个值,我的建议是加一个按钮,change只是给变量赋值,点击按钮之后再调用接口。
如果不想加按钮的话,可以在接口方法加一个判断,然后每次调用接口都给两个值,比如 this.getRequisitionApi(“”,year3) 或者 this.getRequisitionApi(typeValue,""),然后去判断是否有一个为空值,如果没有空值,那就执行接口的内容