vxe中远程数据匹配列单元格的数据value显示label值
君哥
阅读:2533
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中使用插槽
{{row.prescForm}}
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值
{{ valueToLabel(prescTypeDictList, row.prescForm) }}
你的文章内容非常专业,让人佩服。
你的文章让我感受到了生活的美好,谢谢!