vxe中远程数据匹配列单元格的数据value显示label值

yanjun202 by:yanjun202 分类:Vue.js 时间:2024/01/09 阅读:1341 评论:1

vxe中远程数据匹配列单元格的数据value显示label值

使用页面路径:[记录查询 - 开发运营系统](http://192.168.10.117:3100/#/pharmacy/drugPrescMasterQuery)

说明:单元格的请求数据是 :0,1,2  。

需要渲染 对应的是字典中的 数据:普通药,精神药,麻醉药。


//2.template中使用插槽

//3.页面是中 在onmounted 请求数据报错到 页面的 然后便利数据 保存成为这个格式
    [{label:'',value:''}]

//4.使用 valueToLabel 取对应的 label值

思路:

1. vxe 的 columns 配置 使用自定义插槽

     slots:{
        defualt:'perscType'//一般就是用字段名字
    }

2. template中使用插槽

      

3.页面是中 在onMounted 请求数据报错到 页面的 然后便利数据 保存成为这个格式

    const prescTypeDictList = ref()
    onMounted(async () => {
      const prescTypeRes = await prescTypeDictBatchQueryAPI({})
      prescTypeDictList.value = prescTypeRes.map(item => {
        return {
          label: item.perscTypeName,
          value: item.perscType
        }
      })
    })

//valueToLabel 函数
//传入查找数据和options,通过value返回label
export const valueToLabel = (options, value: string | number | boolean | Recordable) => {
  if (options instanceof Array) {
    return options.filter(item => {
      if (item?.value == value) {
        return item?.label
      }
    })[0]?.label
  }
}

4.使用 valueToLabel 取对应的 label值

   


本文链接:https://www.yanjun202.com/post/91.html 

分享到:
非特殊说明,本文版权归原作者所有,转载请注明出处

本文地址:https://www.yanjun202.com/post/91.html

1条评论

发表评论

  • 昵称(必填)
  • 邮箱
  • 网址

TOP