vue3+ts 重复参数提取成方法多处调用以及字段无值时不传字段给后端

参数提取前的写法,此写法值为空的时候也会传空字段给后端

会把无值的空字段传给后端

 

修改后的写法,不会把没有值的字段传给后端

// 列表和导出需要传给后端的公共参数(加 || undefined即可过滤空字段)
const getCurentParam = () => {
  return {
    user_id: info.id || undefined,
    shop_id: state.shop_id || undefined,
    equipment_type: state.equipment_type || undefined,
    relate_type: state.relate_type || undefined,
    sdate: state.dateTime ? state.dateTime[0] : undefined,
    edate: state.dateTime ? state.dateTime[1] : undefined
  };
};

// 数据获取
const getTableData = async () => {
  state.loading = true;
  const { code, data, total } = (await xcx_user_sportlog({
    ...getCurentParam(),
    page: state.pageIndex,
    size: state.pageSize
  })) as HttpResponse;
  if (code == 200 && data) {
    let result = data || [];
    state.tableData = result;
    state.total = total;
    console.log("用户运动记录", result);
  }
  state.loading = false;
};

// 导出
const onExport = async () => {
  const res = (await export_sportlog(getCurentParam())) as HttpResponse;
  if (res.code == 200 && res?.url) {
    const link = document.createElement("a");
    link.href = res?.url;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } else {
    ElMessage.warning("暂无数据导出");
  }
};

只传有值的字段给后端

 

 

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 项目中使用 TypeScript 给日期时间选择器添加一个后端传过来的字段,可以按照以下步骤进行: 1. 确定日期时间选择器的组件,可以使用第三方组件库或者自己编写组件。 2. 在组件中定义一个 props,用于接收后端传过来的日期时间字段。例如: ```typescript props: { datetime: { type: String, required: true } } ``` 3. 在组件中使用 props 中的 datetime 字段作为日期时间选择器的默认值。例如: ```typescript <template> <el-date-picker v-model="selectedDatetime" :default-time="defaultTime"></el-date-picker> </template> <script> import { defineComponent } from 'vue' export default defineComponent({ props: { datetime: { type: String, required: true } }, setup(props) { const selectedDatetime = ref(props.datetime) const defaultTime = new Date(selectedDatetime.value) return { selectedDatetime, defaultTime } } }) </script> ``` 4. 调用接口实现查询,可以使用 Vue3 提供的 `watchEffect` 监听 props 中的 datetime 字段变化,然后调用接口进行查询。例如: ```typescript <template> <el-date-picker v-model="selectedDatetime" :default-time="defaultTime"></el-date-picker> </template> <script> import { defineComponent, ref, watchEffect } from 'vue' export default defineComponent({ props: { datetime: { type: String, required: true } }, setup(props) { const selectedDatetime = ref(props.datetime) const defaultTime = new Date(selectedDatetime.value) watchEffect(() => { // 调用接口实现查询 fetch('/api/getData', { method: 'POST', body: JSON.stringify({ datetime: selectedDatetime.value }) }).then(response => { // 处理响应数据 }) }) return { selectedDatetime, defaultTime } } }) </script> ``` 以上是使用 TypeScript 在 Vue3 项目中给日期时间选择器添加一个后端传过来的字段调用接口实现查询的步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值