基于vue3实现导出设备列表

定义一个按钮 
<el-button type="success" @click="exportDevices">导出设备列表</el-button>

const exportDevices = () => {
  try {
    const data = flattenTreeData(menulist.value);
    
    // 创建工作表
    const ws = utils.json_to_sheet(data);
    
    // 创建工作簿并设置列宽
    const wb = utils.book_new();
    utils.book_append_sheet(wb, ws, '设备列表');
    const cols = [
      { wch: 20 }, // 设备名称列宽
      { wch: 15 }, // 设备编码列宽
      { wch: 15 }  // 父节点列宽
    ];
    ws['!cols'] = cols;

    // 触发下载
    writeFileXLSX(wb, '设备列表.xlsx');
    ElMessage.success('导出成功');
  } catch (error) {
    ElMessage.error('导出失败: ' + error.message);
  }
};

const flattenTreeData = (nodes) => {
  // 存储扁平化后的节点数据
  const result = [];

  /**
   * 递归遍历树节点
   * @param {Object} node - 当前遍历到的节点对象
   * @param {string} parentCode - 当前节点的父节点编码，默认为空字符串
   */
  const walk = (node, parentCode = '') => {
    // 将当前节点的信息添加到结果数组中
    result.push({
      设备名称: node.label,
      设备编码: node.code,
      父节点编码: parentCode || '根节点'
    });

    // 如果当前节点有子节点，则递归遍历子节点
    if (node.children) node.children.forEach(child => walk(child, node.code));
  };

  // 遍历根节点，对每个根节点调用walk函数进行递归遍历
  nodes.forEach(node => walk(node));

  // 返回扁平化后的节点数组
  return result;
};

const flattenTreeData = (nodes) => {

  // 存储扁平化后的节点数据

  const result = [];

  /**

   * 递归遍历树节点

   * @param {Object} node - 当前遍历到的节点对象

   * @param {string} parentCode - 当前节点的父节点编码，默认为空字符串

   */

  const walk = (node, parentCode = '') => {

    // 将当前节点的信息添加到结果数组中

    result.push({

      设备名称: node.label,

      设备编码: node.code,

      父节点编码: parentCode || '根节点'

    });

    // 如果当前节点有子节点，则递归遍历子节点

    if (node.children) node.children.forEach(child => walk(child, node.code));

  };

  // 遍历根节点，对每个根节点调用walk函数进行递归遍历

  nodes.forEach(node => walk(node));

  // 返回扁平化后的节点数组

  return result;

};