首页
/ 7种核心列类型解决数据管理难题：Jspreadsheet CE的高效表格构建指南

7种核心列类型解决数据管理难题：Jspreadsheet CE的高效表格构建指南

2026-04-07 11:58:00作者：余洋婵Anita
ce
Jspreadsheet is a lightweight JavaScript data grid component for creating interactive data grids with advanced spreadsheet controls.
项目地址：https://gitcode.com/gh_mirrors/ce/ce

Jspreadsheet CE是一款轻量级的 vanilla JavaScript 电子表格插件，核心优势在于提供丰富的列类型系统和高度可定制化配置，能够帮助开发者快速构建交互式数据表格。本文面向前端开发者、数据可视化工程师和全栈开发人员，解决传统表格组件在数据录入效率、数据验证和用户交互体验方面的核心痛点，通过系统化的列类型应用方法，实现从简单数据展示到复杂业务系统的数据管理需求。

核心价值定位

Jspreadsheet CE作为开源电子表格工具，其核心价值在于通过灵活的列类型系统实现数据的结构化管理与高效交互。与传统HTML表格相比，它提供了开箱即用的数据验证、格式化和编辑功能；与重量级表格库相比，其轻量化设计（核心体积<100KB）确保了在各类Web应用中的快速集成。该工具特别适合需要构建数据管理界面、报表系统和协作工具的开发场景，通过15种内置列类型覆盖80%以上的业务数据处理需求，同时保持代码的可维护性和性能优化空间。

技术选型指南

特性 Jspreadsheet CE 传统HTML表格 重型表格库
列类型支持 15种内置类型，支持自定义扩展 无内置类型，需完全自定义 8-12种基础类型
数据验证 内置验证规则，支持自定义校验 需手动实现 基础验证功能
性能表现 10万行数据流畅操作 1000行以上卡顿 5万行数据流畅操作
包体积 ~85KB (gzip) 0 (需自行开发) 200KB-1MB
学习曲线 中等，API文档完善 低，但功能有限 陡峭，配置复杂
扩展性 高，支持插件系统 无限制但需从零开发 中，受限于框架设计

技术选型决策建议：个人项目或轻量级应用优先选择Jspreadsheet CE；企业级复杂系统且预算充足可考虑重型表格库；静态数据展示场景可使用传统HTML表格。

列类型三层次分类体系

基础型列类型

文本列（Text Column）

适用场景：产品名称、描述信息、用户评论等非结构化文本数据。

数据验证方案：

{
  type: 'text',
  title: '产品描述',
  width: 300,
  validate: function(value, column, row) {
    // 验证文本长度不超过200字符
    if (value.length > 200) {
      return { 
        valid: false, 
        message: '描述不能超过200个字符' 
      };
    }
    return { valid: true };
  }
}

性能影响：低，纯文本渲染对DOM性能影响最小，建议在大数据量表格中优先使用。

错误用法：

// 错误：对长文本使用固定宽度且未启用文本换行
{ type: 'text', title: '详细描述', width: 150 } // 导致文本截断且无法查看完整内容

优化方案：

// 优化：启用文本换行并添加悬停查看完整内容
{ 
  type: 'text', 
  title: '详细描述', 
  width: 150,
  style: { whiteSpace: 'normal' }, // 启用文本换行
  tooltip: function(cell) { return cell.getValue(); } // 悬停显示完整内容
}

实战Tips：对于需要频繁编辑的文本列，可配置event: 'change'实现实时保存，减少用户显式提交操作。

数字列（Numeric Column）

适用场景：价格、数量、评分、百分比等数值型数据。

数据验证方案：

{
  type: 'numeric',
  title: '商品价格',
  width: 120,
  mask: '$ #,##0.00',
  decimal: '.',
  validate: function(value) {
    // 验证数值范围
    if (value < 0 || value > 10000) {
      return { 
        valid: false, 
        message: '价格必须在0-10000之间' 
      };
    }
    return { valid: true };
  }
}

性能影响：中，涉及数值格式化计算，大数据量时建议关闭实时计算，采用批量更新策略。

实战Tips：使用mask属性统一数据展示格式，同时保留原始数值用于计算，避免字符串数值带来的计算错误。

日期列（Calendar Column）

适用场景：订单日期、生日、有效期等时间相关数据。

数据验证方案：

{
  type: 'calendar',
  title: '有效期',
  width: 180,
  format: 'YYYY-MM-DD',
  validate: function(value) {
    const today = new Date();
    const expiryDate = new Date(value);
    // 验证日期不能早于今天
    if (expiryDate < today) {
      return { 
        valid: false, 
        message: '有效期不能早于当前日期' 
      };
    }
    return { valid: true };
  }
}

性能影响：低，日期选择器仅在交互时渲染，对表格整体性能影响较小。

实战Tips：结合minDate和maxDate属性限制可选日期范围，减少无效数据输入。

交互型列类型

下拉菜单列（Dropdown Column）

适用场景：类别选择、状态标记、优先级设置等固定选项数据。

数据验证方案：

{
  type: 'dropdown',
  title: '订单状态',
  width: 150,
  source: [
    { id: 'pending', name: '待处理' },
    { id: 'processing', name: '处理中' },
    { id: 'shipped', name: '已发货' },
    { id: 'delivered', name: '已送达' }
  ],
  value: 'id', // 存储ID值
  display: 'name', // 显示名称
  validate: function(value) {
    // 验证必须选择有效值
    if (!value) {
      return { 
        valid: false, 
        message: '请选择订单状态' 
      };
    }
    return { valid: true };
  }
}

性能影响：中，选项较多（>50项）时可能影响下拉菜单打开速度，建议采用远程加载或搜索过滤。

错误用法：

// 错误：为大量选项（1000+）使用静态source
{ 
  type: 'dropdown', 
  title: '产品类别', 
  source: veryLargeProductList // 包含1000+项的数组
} // 导致初始加载缓慢和内存占用过高

优化方案：

// 优化：使用动态加载数据源
{ 
  type: 'dropdown', 
  title: '产品类别',
  source: function(search, callback) {
    // 远程搜索接口
    fetch(`/api/products?search=${search}`)
      .then(response => response.json())
      .then(data => callback(data));
  },
  minSearchLength: 2 // 输入至少2个字符才触发搜索
}

实战Tips：使用对象数组形式的source，实现显示值与实际存储值分离，便于数据处理和国际化。

复选框列（Checkbox Column）

适用场景：状态标记（如"已完成"、"已审核"）、多项选择等布尔值或多值场景。

数据验证方案：

{
  type: 'checkbox',
  title: '选项',
  width: 80,
  multiple: true, // 支持多选
  source: ['选项1', '选项2', '选项3'],
  validate: function(value) {
    // 验证至少选择一项
    if (multiple && !value.length) {
      return { 
        valid: false, 
        message: '至少选择一个选项' 
      };
    }
    return { valid: true };
  }
}

性能影响：低，纯DOM操作，性能表现优异。

实战Tips：利用render属性自定义复选框样式，提升视觉体验和品牌一致性。

高级型列类型

图片列（Image Column）

适用场景：产品图片、用户头像、二维码等图片展示需求。

数据验证方案：

{
  type: 'image',
  title: '产品图片',
  width: 120,
  validate: function(value) {
    // 验证图片URL格式
    const urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w .-]*)*\/?$/;
    if (!urlRegex.test(value)) {
      return { 
        valid: false, 
        message: '请输入有效的图片URL' 
      };
    }
    return { valid: true };
  },
  render: function(cell, value) {
    // 自定义图片渲染
    return `<img src="${value}" alt="产品图片" style="max-width:100px;max-height:80px;object-fit:contain;">`;
  }
}

性能影响：高，大量图片列会增加页面加载时间和内存占用，建议使用懒加载和图片优化。

实战Tips：使用CDN和图片压缩服务优化图片加载性能，设置适当的宽高比避免布局偏移。

颜色列（Color Column）

适用场景：状态标识（如优先级颜色）、标签、分类标记等视觉化需求。

数据验证方案：

{
  type: 'color',
  title: '优先级',
  width: 100,
  render: 'square', // 以方形显示颜色
  source: [
    { value: '#FF5252', name: '高' },
    { value: '#FFC107', name: '中' },
    { value: '#4CAF50', name: '低' }
  ],
  validate: function(value) {
    // 验证颜色值有效性
    const colorRegex = /^#([0-9A-F]{3}){1,2}$/i;
    if (!colorRegex.test(value)) {
      return { 
        valid: false, 
        message: '请选择有效的颜色' 
      };
    }
    return { valid: true };
  }
}

性能影响：低，纯CSS渲染，对性能影响极小。

实战Tips：结合tooltip属性显示颜色对应的文本说明，提升可访问性。

场景化解决方案

1. 电商库存管理系统

核心需求：产品信息管理、库存状态跟踪、价格管理

列类型组合方案：

列类型 用途 关键配置
文本列 产品名称、SKU width: 200, validate: 非空验证
下拉列 产品类别、供应商 source: 动态加载列表
数字列 库存数量、价格 mask: 数量无小数，价格带货币符号
复选框列 库存状态（缺货/有货） multiple: false
日期列 入库日期、过期日期 format: 'YYYY-MM-DD'
图片列 产品缩略图 render: 自定义图片尺寸

实现要点：

// 库存预警功能实现
{
  type: 'numeric',
  title: '库存数量',
  width: 100,
  cellClass: function(cell, value) {
    // 库存低于10时添加警告样式
    return value < 10 ? 'low-stock' : '';
  },
  // 性能优化点：仅在值变化时重新计算样式
  calculateCellClassOnUpdate: true
}

2. 项目管理看板

核心需求：任务跟踪、进度管理、负责人分配

列类型组合方案：

列类型 用途 关键配置
文本列 任务标题、描述 width: 250, style: { whiteSpace: 'normal' }
下拉列 任务状态、优先级 source: 状态流转列表
日期列 开始日期、截止日期 validate: 截止日期不能早于开始日期
复选框列 标签选择 multiple: true, source: 标签列表
颜色列 优先级标识 render: 'square', source: 预设颜色

实现要点：

// 日期差计算列（自定义列类型）
{
  type: 'text',
  title: '剩余天数',
  width: 100,
  readOnly: true,
  render: function(cell) {
    const endDate = cell.getRow().getCell('endDate').getValue();
    if (!endDate) return '';
    
    const today = new Date();
    const end = new Date(endDate);
    const diffTime = end - today;
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    
    return diffDays > 0 ? `${diffDays}天` : '已逾期';
  }
}

3. 客户关系管理系统

核心需求：客户信息管理、跟进记录、成交状态

列类型组合方案：

列类型 用途 关键配置
文本列 客户名称、联系方式 validate: 非空和格式验证
下拉列 客户等级、来源渠道 source: 客户分类列表
日期列 首次联系、最后跟进 format: 'YYYY-MM-DD HH:MM'
数字列 成交金额、跟进次数 mask: 金额带货币符号
图片列 客户头像 render: 圆形头像样式

实现要点：

// 客户价值计算（高级配置示例）
{
  type: 'numeric',
  title: '客户价值',
  width: 120,
  mask: '$ #,##0.00',
  readOnly: true,
  calculate: function(row) {
    // 基于成交金额和跟进次数计算客户价值
    const amount = row.getCell('amount').getValue() || 0;
    const followUps = row.getCell('followUps').getValue() || 0;
    return amount * (1 + followUps * 0.05); // 跟进次数越多，客户价值系数越高
  }
}

移动端适配

响应式列配置

针对移动设备屏幕尺寸限制，实现列的动态显示与隐藏：

// 移动端适配配置
jspreadsheet(document.getElementById('spreadsheet'), {
  worksheets: [{
    data: dataSource,
    columns: [
      { type: 'text', title: '产品名称', width: 180, media: '(max-width: 768px)' }, // 仅移动端显示
      { type: 'text', title: 'SKU', width: 120, media: '(min-width: 769px)' }, // 仅桌面端显示
      { 
        type: 'numeric', 
        title: '价格', 
        width: 100,
        // 不同设备显示不同格式
        mask: function() {
          return window.innerWidth < 768 ? '$ #,##0' : '$ #,##0.00';
        }
      }
    ],
    // 移动端优化配置
    mobileOptions: {
      scrollX: true, // 允许水平滚动
      touchNavigation: true, // 启用触摸导航
      columnMinWidth: 80 // 设置最小列宽
    }
  }]
});

触控友好的交互优化

// 增强移动端交互体验
{
  type: 'dropdown',
  title: '状态',
  width: 120,
  source: statusList,
  // 移动端增大点击区域
  cellStyle: function() {
    return window.innerWidth < 768 ? 
      { padding: '12px 8px', fontSize: '14px' } : 
      { padding: '8px 4px', fontSize: '12px' };
  },
  // 触摸延迟优化
  touchAction: 'manipulation' // 优化触摸响应
}

实战Tips：使用media属性控制不同设备显示的列，保持移动端界面简洁；增大触控元素尺寸（至少44x44px）提升操作体验。

无障碍设计

键盘导航支持

// 增强键盘可访问性
{
  type: 'text',
  title: '搜索',
  width: 200,
  // 添加键盘快捷键
  shortcuts: [
    { key: 'F', meta: true, shift: true, action: function(instance) {
      // 聚焦到搜索列第一个单元格
      instance.focusCell(0, instance.getColumnIndex('search'));
    }}
  ],
  // 添加ARIA标签
  ariaLabel: '搜索产品，按Enter键搜索'
}

屏幕阅读器兼容

// 屏幕阅读器优化
{
  type: 'color',
  title: '状态',
  width: 100,
  render: 'square',
  source: statusColors,
  // 为颜色添加文本描述
  ariaLabel: function(cell) {
    const value = cell.getValue();
    const status = statusColors.find(s => s.value === value);
    return `状态: ${status ? status.name : '未设置'}`;
  }
}

实战Tips：为所有交互元素添加适当的ARIA标签，确保键盘操作的完整性，测试屏幕阅读器兼容性。

避坑指南

性能优化常见问题

  1. 大数据量渲染问题

    • 问题：10000+行数据渲染缓慢
    • 解决方案：启用虚拟滚动和懒加载
    {
  lazyLoading: true, // 启用懒加载
  lazyLoadingStep: 50, // 每次加载50行
  virtualScroll: true, // 启用虚拟滚动
  virtualScrollRows: 50 // 可视区域显示50行
}

  2. 频繁数据更新导致的卡顿

    • 问题：实时数据更新导致界面卡顿
    • 解决方案：使用批量更新和节流
    // 性能优化点：使用批量更新减少重绘
const batchUpdate = spreadsheet[0].batchUpdate();
// 执行多个更新操作
for (let i = 0; i < 100; i++) {
  spreadsheet[0].setValue(i, 0, `数据 ${i}`);
}
// 提交批量更新
batchUpdate.commit();

数据验证与错误处理

  1. 复杂验证规则实现

    // 多条件组合验证
{
  type: 'numeric',
  title: '折扣',
  width: 100,
  validate: function(value, column, row) {
    const price = row.getCell('price').getValue();
    const isVIP = row.getCell('isVIP').getValue();
    
    // VIP客户折扣不超过30%，普通客户不超过10%
    const maxDiscount = isVIP ? 0.3 : 0.1;
    
    if (value > maxDiscount) {
      return { 
        valid: false, 
        message: `VIP客户最大折扣为30%，普通客户为10%` 
      };
    }
    return { valid: true };
  }
}

  2. 验证错误的用户反馈

    // 自定义错误提示样式
{
  type: 'text',
  title: '邮箱',
  width: 200,
  validate: function(value) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(value)) {
      return { 
        valid: false, 
        message: '请输入有效的邮箱地址' 
      };
    }
    return { valid: true };
  },
  // 自定义错误样式
  errorStyle: { 
    border: '2px solid #dc3545',
    backgroundColor: 'rgba(220, 53, 69, 0.1)'
  }
}

高级配置示例

1. 动态依赖列

根据其他列的值动态改变列的配置：

{
  type: 'dropdown',
  title: '子类别',
  width: 150,
  source: function(cell) {
    // 获取同一行的"类别"列值
    const category = cell.getRow().getCell('category').getValue();
    
    // 根据类别动态加载子类别
    return new Promise(resolve => {
      fetch(`/api/subcategories?category=${category}`)
        .then(response => response.json())
        .then(data => resolve(data));
    });
  },
  // 当依赖列变化时重新加载
  dependencies: ['category']
}

2. 自定义复合列类型

创建包含多个输入元素的复合列：

// 注册自定义复合列类型
jspreadsheet.registerColumnType('address', {
  // 渲染函数
  render: function(cell, value) {
    value = value || { street: '', city: '', zip: '' };
    return `
      <div class="address-inputs">
        <input type="text" class="street" value="${value.street || ''}" placeholder="街道">
        <input type="text" class="city" value="${value.city || ''}" placeholder="城市">
        <input type="text" class="zip" value="${value.zip || ''}" placeholder="邮编">
      </div>
    `;
  },
  // 获取值函数
  getValue: function(cell) {
    const el = cell.getContentElement();
    return {
      street: el.querySelector('.street').value,
      city: el.querySelector('.city').value,
      zip: el.querySelector('.zip').value
    };
  },
  // 设置值函数
  setValue: function(cell, value) {
    const el = cell.getContentElement();
    if (el) {
      el.querySelector('.street').value = value.street || '';
      el.querySelector('.city').value = value.city || '';
      el.querySelector('.zip').value = value.zip || '';
    }
  }
});

// 使用自定义列类型
{
  type: 'address',
  title: '地址',
  width: 300
}

第三方生态插件扩展

1. 富文本编辑器列

集成TinyMCE实现富文本编辑列：

// 富文本列配置
{
  type: 'custom',
  title: '产品描述',
  width: 400,
  render: function(cell) {
    const id = 'richtext-' + cell.getId();
    setTimeout(() => {
      // 初始化TinyMCE编辑器
      tinymce.init({
        selector: '#' + id,
        height: 200,
        menubar: false,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'undo redo | formatselect | ' +
        'bold italic backcolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat | help',
        setup: function(editor) {
          editor.on('change', function() {
            // 将编辑器内容同步到单元格
            cell.setValue(editor.getContent());
          });
        }
      });
    }, 0);
    return `<textarea id="${id}">${cell.getValue() || ''}</textarea>`;
  }
}

2. 图表列类型

集成Chart.js实现数据可视化列：

// 图表列配置
{
  type: 'custom',
  title: '趋势图',
  width: 200,
  render: function(cell) {
    const id = 'chart-' + cell.getId();
    const data = cell.getValue() || [10, 25, 15, 30, 20];
    
    setTimeout(() => {
      // 创建图表
      new Chart(document.getElementById(id), {
        type: 'line',
        data: {
          labels: ['一月', '二月', '三月', '四月', '五月'],
          datasets: [{
            data: data,
            borderColor: '#4285f4',
            fill: true,
            backgroundColor: 'rgba(66, 133, 244, 0.1)'
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: { legend: { display: false } },
          scales: {
            x: { display: false },
            y: { display: false }
          }
        }
      });
    }, 0);
    
    return `<canvas id="${id}" style="width:100%;height:80px;"></canvas>`;
  }
}

3. 公式计算列扩展

集成math.js实现高级公式计算：

// 高级公式列配置
{
  type: 'numeric',
  title: '利润',
  width: 120,
  mask: '$ #,##0.00',
  calculate: function(row) {
    // 获取相关单元格值
    const revenue = row.getCell('revenue').getValue() || 0;
    const costs = row.getCell('costs').getValue() || 0;
    const taxRate = row.getCell('taxRate').getValue() || 0.2;
    
    // 使用math.js计算复杂公式
    return math.evaluate(`(revenue - costs) * (1 - taxRate)`, {
      revenue, costs, taxRate
    });
  }
}

列类型选择决策树

graph TD
    A[开始] --> B{数据类型};
    B -->|文本/字符串| C[基础型 - 文本列];
    B -->|数字/数值| D[基础型 - 数字列];
    B -->|日期/时间| E[基础型 - 日期列];
    B -->|选项选择| F{选择类型};
    F -->|单一选项| G[交互型 - 下拉列];
    F -->|多个选项| H[交互型 - 复选框列];
    F -->|二值选择| I[交互型 - 单选框列];
    B -->|特殊类型| J{内容类型};
    J -->|图片| K[高级型 - 图片列];
    J -->|颜色| L[高级型 - 颜色列];
    J -->|富文本| M[高级型 - HTML列];
    J -->|隐藏数据| N[高级型 - 隐藏列];
    C --> O[结束];
    D --> O;
    E --> O;
    G --> O;
    H --> O;
    I --> O;
    K --> O;
    L --> O;
    M --> O;
    N --> O;

总结

Jspreadsheet CE的列类型系统为构建高效数据管理界面提供了强大支持，通过基础型、交互型和高级型三层次的列类型分类，开发者可以根据实际业务需求灵活选择和配置。本文介绍的"问题-方案-实践"框架，帮助开发者系统性地理解和应用列类型，解决数据管理中的核心痛点。

通过场景化解决方案和避坑指南，开发者可以快速构建电商库存管理、项目管理看板和客户关系管理等实际应用。移动端适配和无障碍设计章节则确保了应用的广泛可用性。高级配置示例和第三方生态插件扩展展示了Jspreadsheet CE的强大扩展性，为复杂业务需求提供了解决思路。

列类型选择决策树为开发者提供了直观的选择指南，帮助在实际项目中快速确定最合适的列类型。掌握这些知识后，开发者能够充分利用Jspreadsheet CE的潜力，构建高效、易用且功能丰富的数据管理界面。

未来，随着Web技术的发展，Jspreadsheet CE的列类型系统将继续演进，提供更多创新功能和更好的用户体验，成为Web数据管理领域的重要工具。

ce
Jspreadsheet is a lightweight JavaScript data grid component for creating interactive data grids with advanced spreadsheet controls.
项目地址：https://gitcode.com/gh_mirrors/ce/ce
登录后查看全文

相关内容推荐

1 3个提升前端数据表格开发效率的核心技巧：基于Jspreadsheet CE的实践指南2 7个数据管理价值：Jspreadsheet CE交互式表格实战指南3 Jspreadsheet CE：如何用15种列类型构建专业Web表格应用4 Jspreadsheet CE搜索与排序：5分钟掌握快速定位关键数据的终极指南5 Jspreadsheet CE 企业级应用案例：从CRM到ERP的实战经验分享6 如何用Jspreadsheet CE构建企业级表格应用？核心功能与实战指南7 Jspreadsheet CE数据管理功能实战指南：从基础模块到高级特性8 3个核心功能解决数据管理难题：Jspreadsheet CE从入门到实战9 Jspreadsheet CE 性能优化：10个技巧让你的电子表格运行如飞10 7种核心列类型实现高效数据管理：Jspreadsheet CE前端表格插件指南
热门项目推荐
相关项目推荐

热门内容推荐

1 build-your-own-x 探索指南：从零构建编程技能体系2 技术实践新范式：build-your-own-x项目的系统构建与能力跃迁指南3 build-your-own-x 开源学习项目一站式指南4 【亲测免费】 开源项目 `build-your-own-x` 使用指南5 【亲测免费】 探索科技之旅：《Build Your Own X》项目详解6 GitHub_Trending/bu/build-your-own-x自动化：CI/CD流程在自制项目中的应用7 从零打造智能家居系统：用build-your-own-x实现家庭自动化

最新内容推荐

Tauri/Pake 构建 Windows 桌面包卡死？彻底告别 WiX 与 NSIS 下载超时的终极指南智能歌词同步：AI驱动的音频字幕制作解决方案Steam Deck Windows驱动完全攻略：彻底解决手柄兼容性问题的5大方案猫抓：让网页视频下载从此告别技术门槛Blender贝塞尔曲线处理插件：解决复杂曲线编辑难题的专业工具集多智能体评估一站式解决方案：CAMEL基准测试框架全解析三步搭建AI视频解说平台：NarratoAI容器化部署指南B站视频下载工具：从4K画质到批量处理的完整解决方案Shutter Encoder：面向全层级用户的视频压缩创新方法解放双手！3大维度解析i茅台智能预约系统

项目优选

收起
docsdocs
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
654
4.25 K
kernelkernel
deepin linux kernel
C
27
14
pytorchpytorch
Ascend Extension for PyTorch
Python
498
604
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
390
282
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
938
859
Oohos_react_native
React Native鸿蒙化仓库
JavaScript
333
389
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
1.53 K
889
flutter_flutterflutter_flutter
暂无简介
Dart
902
217
AscendNPU-IRAscendNPU-IR
AscendNPU-IR是基于MLIR（Multi-Level Intermediate Representation）构建的，面向昇腾亲和算子编译时使用的中间表示，提供昇腾完备表达能力，通过编译优化提升昇腾AI处理器计算效率，支持通过生态框架使能昇腾AI处理器与深度调优
C++
124
195
MindSpeed-LLMMindSpeed-LLM
昇腾LLM分布式训练框架
Python
142
168