Ant

admin管理员组

文章数量:1600824

Ant

将 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})
}

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

const getEnumMap = function (type, key = 'dictCode', value = 'dictValue') {const item = typeof type === 'string' ? store.state.keyvalue.sysKeys[type] : typereturn item.reduce((obj, item) => {obj[item[key]] = item[value]return obj}, {})
}

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);
};

引入了 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
}

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

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

本文标签： Ant