当前位置: 首页 > java >正文

Vue3 对象转换

数据准备:

// 部门 hooks,实现开箱即用的效果,这里是开箱(通过 useDepartment 开箱),后面是即用

const departmentHooks = useDepartment();

departmentHooks.departmentList 的内容为:

[
    {
        "key": null,
        "label": "中心主任室",
        "value": "ALD"
    },
    {
        "key": null,
        "label": "办公室",
        "value": "BGS"
    }
]

对象A:departmentList 的结构

departmentList: Ref<{
key?: string | number | undefined;
label: string | number;
value: string | number;
}[]>;

需要将对象A(departmentList )转换成 对象B(departmentFilters)

对象B(departmentFilters)的结构为:

{

        text: string;

        value: string;

}

================================================

转换方法1:箭头函数

// 表格列筛选列表
const departmentFilters = computed(() => {return departmentHooks.departmentList.value.map((item) => {let { label, value } = item;return {text: label as string,value: value as string};});
});

转换方法2: 简化箭头函数

// 表格列筛选列表
const departmentFilters = computed(() =>departmentHooks.departmentList.value.map((item) => ({text: item.label as string,value: item.value as string}))
);

对象B(departmentFilters)的内容为:

[
    {
        "text": "中心主任室",
        "value": "ALD"
    },
    {
        "text": "办公室",
        "value": "BGS"
    }
]

http://www.xdnf.cn/news/8428.html

相关文章:

  • 七:操作系统文件系统之目录结构
  • 【Elasticsearch】创建别名的几种方式
  • 算法打卡第五天
  • 三、如何优化opengl在gpu上的渲染性能
  • 「EMD/EEMD/VMD 信号分解方法 ——ECG信号处理-第十四课」2025年5月23日
  • 每日Prompt:虚拟世界游
  • Linux性能监控:工具与最佳实践
  • Vue.js教学第十二章:Vue Router实战指南(二)
  • C++ 日志系统实战第六步:性能测试
  • Day 29 训练
  • 永磁同步电机控制算法-滑模反馈线性化控制器
  • 红队攻防实践:15大漏洞原理与复现全解析
  • 【agent】简历信息提取智能体
  • AGV(自动导引车)通信协议及通信链路性能需求分析
  • 力扣HOT100之图论:994. 腐烂的橘子
  • 二、详细解释OpenGL图形管线中顶点处理阶段的工作原理
  • day57—快速(选择/排序)—数组中的第 K 个最大元素(LeetCode-215)
  • 国家网络身份认证公共服务管理办法
  • nginx配置跨域请求,后台不用配置啦,完美
  • vue 水印组件
  • 【Dv3Admin】插件 dv3admin_chatgpt 优化支持多种启动方式实现SSE效果
  • QT之巧用对象充当信号接收者
  • Linux进程 线程 进程间通信 IPC——管道
  • 全国青少年信息素养大赛-python编程—省赛真题—卡牌游戏
  • Redis配置文件详解
  • 树 Part 10
  • JFace中MVC的表的单元格编辑功能的实现
  • Datawhale_PyPOTS_task6
  • 【安全攻防与漏洞​】​​HTTPS中的常见攻击与防御​​
  • 机器人强化学习入门学习笔记(三)