多级嵌套数组对象更改key键-递归比JSON.stringfy操作字符快近20倍

最新推荐文章于 2023-10-28 16:42:34 发布

卿卿qing

最新推荐文章于 2023-10-28 16:42:34 发布

阅读量1.2k

点赞数 4

分类专栏： Vue JaveScript 前端

本文链接：https://blog.csdn.net/weixin_43900414/article/details/119612704

版权

Vue 同时被 3 个专栏收录

114 篇文章

订阅专栏

JaveScript

88 篇文章

订阅专栏

前端

76 篇文章

订阅专栏

这篇博客介绍了如何在Vue中使用el-cascader组件时，将后台返回的层级数据转换为所需的label、value和children格式。提供了两种方法：一是递归遍历并修改对象，二是通过JSON.stringify和replace方法直接转换。这两种方法都能有效地实现数据格式的转换，以适应el-cascader组件的使用需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用场景

el-cascader层级数据，将后台字段key更改为label，value，children

<el-cascader
  placeholder=""
  :options="relationList"
  :show-all-levels="false"
  filterable
></el-cascader>

方法一：递归更改或者新增key

relationListFn () {
  api.regionOrganize.districtList().then(res => {
    this.relationList = res.data
    this.rewriteKey(this.relationList)
},
rewriteKey (val) {
  val.forEach(item => {
    item.label = item.bizName
    item.value = item.bizCode
    item.children = item.childrenList
    if (item.children) {
      this.rewriteKey(item.children)
    }
  })
},

方法二：操作字符，将数组stringfy后，替换key，后转为数组

relationListFn () {
  api.regionOrganize.districtList().then(res => {
    this.relationList = res.data
    const value = this.relationList && JSON.stringify(this.relationList).replace(/bizCode/g, 'value')
    const label = value && value.replace(/bizName/g, 'label')
    const children = label && label.replace(/childrenList/g, 'children')
    this.relationList = children && JSON.parse(children)
  })
}