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

君哥阅读：2502 2024-01-09 09:05:09 评论：2

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
  }
}