mapping

mapping({ data, fieldNames, expand, treeFieldName, keepOtherFields })

将列表数据映射成新的数据结构

参数

名称	说明	类型	默认值
data	数据列表	array	-
fieldNames	字段名	object	-
expand	扩展数据	object	-
treeFieldName	子节点字段名	string	-
keepOtherFields	是否保留其他字段	boolean	false

代码演示

基础用法

示例

const data = [
  { id: '1', title: '选项1', number: 1 },
  { id: '2', title: '选项2', number: 2 },
]

const list = mapping({
  data,
  filedNames: {
    key: 'id',
    label: 'title',
    value: 'number',
  },
})

console.log(list)

输出

[
  {
    "key": "1",
    "label": "选项1",
    "value": 1
  },
  {
    "key": "2",
    "label": "选项2",
    "value": 2
  }
]

扩展数据

使用函数也可实现相同的功能

示例

const data = [
  { id: '1', title: '选项1', number: 1 },
  { id: '2', title: '选项2', number: 2 },
]

const list = mapping({
  data,
  filedNames: {
    key: 'id',
    label: 'title',
    value: 'number',
  },
  expand: {
    active: true
  }
})

console.log(list)

输出

[
  {
    "key": "1",
    "label": "选项1",
    "value": 1,
    "active": true
  },
  {
    "key": "2",
    "label": "选项2",
    "value": 2,
    "active": true
  }
]

数结构

示例

const data = [
  {
    id: '1',
    title: '选项1',
    number: 1,
    childList: [
      { id: '1', title: '选项1', number: 1 },
      { id: '2', title: '选项2', number: 2 },
    ],
  },
  {
    id: '2',
    title: '选项2',
    number: 2,
    childList: [
      { id: '1', title: '选项1', number: 1 },
      { id: '2', title: '选项2', number: 2 },
    ],
  },
  { id: '3', title: '选项3', number: 3 },
  { id: '4', title: '选项4', number: 4 },
]

const list = mapping({
  data,
  filedNames: {
    key: 'id',
    label: 'title',
    value: 'number',
    children: 'childList',
  },
  treeFieldName: 'childList',
})

console.log(list)

示例

;[
  {
    key: '1',
    label: '选项1',
    value: 1,
    children: [
      { key: '1', label: '选项1', value: 1 },
      { key: '2', label: '选项2', value: 2 },
    ],
  },
  {
    key: '2',
    label: '选项2',
    value: 2,
    children: [
      { key: '1', label: '选项1', value: 1 },
      { key: '2', label: '选项2', value: 2 },
    ],
  },
  { key: '3', label: '选项3', value: 3 },
  { key: '4', label: '选项4', value: 4 },
]

保留字段

示例

const data = [
  { id: '1', title: '选项1', number: 1 },
  { id: '2', title: '选项2', number: 2 },
]

const list = mapping({
  data,
  filedNames: {
    key: 'id',
    label: 'title',
    value: 'number',
  },
  keepOtherFields: true,
})

console.log(list)

输出

[
  {
    "id": "1",
    "title": "选项1",
    "number": 1,
    "key": "1",
    "label": "选项1",
    "value": 1
  },
  {
    "id": "2",
    "title": "选项2",
    "number": 2,
    "key": "2",
    "label": "选项2",
    "value": 2
  }
]

使用函数

示例

const data = [
  { id: '1', title: '选项1', number: 1 },
  { id: '2', title: '选项2', number: 2 },
]

const list = mapping({
  data,
  filedNames: {
    key: 'id',
    label: 'title',
    value: 'number',
    alias: (item, index, array) => {
      return `${item.title}-${index}`
    },
  },
  keepOtherFields: true,
})

console.log(list)

输出

[
  {
    "key": "1",
    "label": "选项1",
    "value": 1,
    "alias": "选项1-0"
  },
  {
    "key": "2",
    "label": "选项2",
    "value": 2,
    "alias": "选项2-1"
  }
]