Ant-design-vue Table 列表 columns 将作为导出功能入参

将 Table 列表 columns 将作为导出功能入参，由于 columns 数据跟入参存在差异，因此我们抽离公共方法进行处理。

const handleExportColumnsData = function (columns = []) {
  if (!columns.length) return []
  return columns.filter(item => item.dataIndex !== 'action').map(item => {
    const res = { displayName: item.title, field: item.dataIndex }
    item.enum && (res.enumMap = getEnumMap(item.enum))
    return res
  })
}
1
2
3
4
5
6
7
8

首先过滤掉操作列 action，然后如果该列存在使用过枚举值的，则调用 getEnumMap 方法进行转换。代码实现如下：

const getEnumMap = function (type, key = 'dictCode', value = 'dictValue') {
  const item = typeof type === 'string' ? store.state.keyvalue.sysKeys[type] : type
  return item.reduce((obj, item) => {
    obj[item[key]] = item[value]
    return obj
  }, {})
}
1
2
3
4
5
6
7

getEnumMap 的第一个入参 type 支持字符串映射 store 中的属性，也可以直接传入枚举值数组，然后使用 reduce 将数组转换为对象，这里 key 和 value 是枚举值数组中的 key、value 字段名。

考虑到 columns 列表可能存在嵌套表头，因此我们需要使用递归来处理每个嵌套层级的数据，具体代码逻辑如下：

const handleExportColumnsData = function (columns = []) {
  const processColumn = (column) => {
    const res = { displayName: column.title, field: column.dataIndex };
    if (column.enum) {
      res.enumMap = getEnumMap(column.enum);
    }
    if (column.children && column.children.length > 0) {
      res.children = handleExportColumnsData(column.children);
    }
    return res;
  };

  return columns.map(processColumn);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

引入了 processColumn 函数，用于处理单个列对象。如果列对象具有子列（children），则递归调用 handleExportColumnsData 处理子列，并将处理后的子列添加到结果对象的 children 属性中，从而实现处理多层级嵌套的数据结构。

当然如果想要获取子节点而不是转换数据结构的话，实现如下：

const getChildrenColumns = function (columns = []) {
  const childColumns = []

  columns.filter(item => !['action', 'index'].includes(item.dataIndex)).forEach(item => {
    if (item.children && item.children.length > 0) {
      const children = getChildrenColumns(item.children)
      childColumns.push(...children)
    }
    if (item.dataIndex) {
      item.enum && (item.enumMap = getEnumMap(item.enum))
      childColumns.push({ displayName: item.title, field: item.dataIndex, enumMap: item.enumMap })
    }
  })

  return childColumns
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用 getChildrenColumns 遍历列配置，收集所有包含子节点的列以及带有 dataIndex 属性的列，并返回它们的数组。

上述功能需配合后端接口实现的，更多 excel 导出，请参考：导出 excel 表格（纯前端）和下载excel 文件