vue3 传参 传入变量名

背景:

需求是:在vue框架中,接口传参我们需要穿“变量名”,而不是字符串

通俗点说法是:在网络接口请求的时候,要传属性名

效果展示:

vue3 传参 传入变量名_第1张图片

vue2核心代码:

this[_keyParam]

vue3 传参 传入变量名_第2张图片

vue3核心代码:

[_keyParam] 

vue3 传参 传入变量名_第3张图片

//封装方法
const filtertreeLocationSelect =  async(filterVal, item )=> {
  if (!filterVal) return;
  const _keyParam = item.filterablePrama.keyParam
  // console.log('_key>>>',_keyParam,typeof _keyParam,33,this[_keyParam]);
  console.log('_key>>>',_keyParam,typeof _keyParam,33,[_keyParam]);
  //后端接口
  await handleSubFilter(item, {[_keyParam] : filterVal });
};

完整使用案列:


const item = {
    type: "treeLocationSelect",
    label: "渡口名称",
    key: "dkId",
    url: "/data/ferryPort/pageData",
    methed: "post",
    optionParam: {
      label: "name",
      value: "pid",
    },
    optionsData: [],
    moreparams: {
      pageNum: 1,
      pageSize: 99999,
    },
    headers: {
      headers: {
        "Content-Type": "application/json",
      },
    },
    default: store.selectAreaId,
    limit: "有联动",
    filterable: true,
    filterablePrama:{
      keyParam:'name'
    },
  },
//调用封装方法:
filtertreeLocationSelect(filterVal,item )

 

 

你可能感兴趣的:(项目架构,前端,ajax,网络)