首页
/ 7个实战技巧掌握Ant Design Vue Pro高级表格开发指南

7个实战技巧掌握Ant Design Vue Pro高级表格开发指南

2026-04-07 12:32:51作者：晏闻田Solitary
ant-design-vue-pro
👨🏻‍💻👩🏻‍💻 Use Ant Design Vue like a Pro! (vue2)
项目地址：https://gitcode.com/gh_mirrors/ant/ant-design-vue-pro

在企业级后台系统开发中，表格作为数据交互的核心载体，面临着数据展示个性化、编辑交互流畅性和大数据性能优化等多重挑战。Ant Design Vue Pro提供的高级表格组件通过二次封装解决了这些痛点，但多数开发者仅停留在基础使用层面。本文将通过"场景需求→核心功能→实现方案→扩展应用"的实战路径，帮助开发者系统掌握高级表格的定制化开发技巧，提升企业级应用的数据交互体验。

场景需求：企业级表格的典型挑战

企业后台系统中的表格应用通常需要满足三类核心需求：数据可视化定制、高效编辑交互和大规模数据处理。这些需求在实际开发中常表现为：如何根据数据状态动态渲染单元格样式？如何实现流畅的行内编辑体验？如何在万级数据下保持表格操作流畅？

需求分析：从业务场景到技术实现

企业级表格的业务场景可归纳为四大类：

  1. 数据监控场景：需实时展示数据状态并支持快速筛选
  2. 内容管理场景：需提供便捷的编辑、批量操作功能
  3. 数据分析场景：需支持复杂数据统计与可视化展示
  4. 流程审批场景：需根据状态展示不同操作选项

这些场景对表格组件提出了动态渲染、状态管理和性能优化的技术要求，而Ant Design Vue Pro的高级表格组件通过灵活的配置系统提供了完整解决方案。

技术选型：为何选择封装后的高级表格

原生Ant Design Vue Table组件虽然功能强大，但在企业应用中仍需解决数据加载标准化、操作交互统一化和状态管理集中化等问题。高级表格组件（src/components/Table/index.js）通过封装实现了：

  • 标准化的异步数据加载流程
  • 统一的选中状态管理
  • 内置的分页与排序处理
  • 灵活的自定义渲染机制

核心功能：高级表格的四大支柱特性

高级表格组件的强大之处在于其模块化的设计理念，将复杂功能拆解为可配置的独立模块。掌握这些核心功能模块，是实现个性化需求的基础。

💻 自定义单元格：从静态展示到动态交互

问题场景：如何根据数据状态展示不同样式，如将异常值标红、为不同状态显示不同标签？

实现思路：Ant Design Vue Pro提供两种自定义渲染机制，分别适用于简单格式化和复杂交互场景。

代码示例：基础文本格式化

// 简单数值格式化（适用于添加单位、状态转换等场景）
const columns = [
  {
    title: '服务调用次数',
    dataIndex: 'callNo',
    sorter: true,  // 启用排序功能
    needTotal: true,  // 启用统计功能
    // 自定义渲染函数：为数值添加单位
    customRender: (text) => {
      // 非数字或0值显示为"--"
      if (!text || isNaN(text)) return '--'
      // 大于1000时显示为"x千"格式
      return text > 1000 ? `${(text/1000).toFixed(1)}k 次` : `${text} 次`
    }
  }
]

代码示例：复杂状态标签

<!-- 复杂状态展示（适用于需要多种样式或交互的场景） -->
<template>
  <s-table
    ref="table"
    :columns="columns"
    :data="loadData"
  >
    <!-- 状态列自定义插槽 -->
    <template slot="status" slot-scope="text, record">
      <a-tag 
        :color="getStatusColor(text)" 
        :icon="getStatusIcon(text)"
      >
        {{ getStatusText(text) }}
      </a-tag>
    </template>
  </s-table>
</template>

<script>
export default {
  methods: {
    // 根据状态值返回不同颜色
    getStatusColor(status) {
      const colorMap = {
        0: 'blue',    // 进行中
        1: 'green',   // 已完成
        2: 'red',     // 异常
        3: 'orange'   // 暂停
      }
      return colorMap[status] || 'default'
    },
    // 获取状态文本
    getStatusText(status) {
      const textMap = {
        0: '进行中',
        1: '已完成',
        2: '异常',
        3: '暂停'
      }
      return textMap[status] || '未知'
    }
  }
}
</script>

适用场景：customRender适用于简单文本转换，scopedSlots适用于包含复杂HTML结构或交互的场景。注意避免在渲染函数中进行复杂计算，以免影响表格性能。

🔧 编辑功能：从模态框到行内编辑

问题场景：如何实现高效的数据编辑流程，平衡操作便捷性与数据完整性验证？

实现思路：Ant Design Vue Pro推荐两种编辑模式：模态框编辑（适合多字段复杂编辑）和行内编辑（适合简单快速编辑），两种模式可根据业务复杂度灵活选择。

代码示例：模态框编辑实现

<template>
  <div>
    <s-table
      ref="table"
      :columns="columns"
      :data="loadData"
    >
      <!-- 操作列 -->
      <template slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a @click="handleDelete(record)">删除</a>
      </template>
    </s-table>
    
    <!-- 编辑模态框 -->
    <a-modal
      title="编辑数据"
      :visible="modalVisible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form :form="form">
        <a-form-item
          label="名称"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 15 }"
        >
          <a-input 
            v-decorator="['name', { 
              rules: [{ required: true, message: '请输入名称' }] 
            }]" 
          />
        </a-form-item>
        <a-form-item
          label="状态"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 15 }"
        >
          <a-select 
            v-decorator="['status', { 
              rules: [{ required: true, message: '请选择状态' }] 
            }]"
          >
            <a-select-option value="0">进行中</a-select-option>
            <a-select-option value="1">已完成</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modalVisible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      currentRecord: null
    }
  },
  methods: {
    // 打开编辑模态框
    handleEdit(record) {
      this.currentRecord = { ...record }
      this.modalVisible = true
      // 加载数据到表单
      this.$nextTick(() => {
        this.form.setFieldsValue(this.currentRecord)
      })
    },
    
    // 保存编辑数据
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          // 调用API保存数据
          this.updateData({
            id: this.currentRecord.id,
            ...values
          }).then(() => {
            this.$message.success('保存成功')
            this.modalVisible = false
            this.confirmLoading = false
            // 刷新表格数据
            this.$refs.table.refresh()
          }).catch(() => {
            this.confirmLoading = false
          })
        }
      })
    }
  }
}
</script>

行内编辑实现要点：

  1. 使用scopedSlots定义可编辑单元格
  2. 通过editable状态控制输入框显示/隐藏
  3. 实现失焦保存或单独保存按钮
  4. 添加编辑状态验证与错误提示

📊 批量操作：从单选到批量处理

问题场景：如何高效处理多条数据，如批量删除、批量状态更新等操作？

实现思路：通过表格的rowSelection配置启用行选择功能，结合顶部操作栏实现批量操作。

代码示例：批量操作实现

<template>
  <div>
    <!-- 批量操作工具栏 -->
    <div class="table-toolbar">
      <a-button 
        type="primary" 
        @click="handleBatchDelete"
        :disabled="selectedRowKeys.length === 0"
      >
        <a-icon type="delete" /> 批量删除
      </a-button>
      
      <a-dropdown 
        v-if="selectedRowKeys.length > 0"
        placement="bottomCenter"
      >
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item key="status-0">标记为进行中</a-menu-item>
          <a-menu-item key="status-1">标记为已完成</a-menu-item>
          <a-menu-item key="status-2">标记为异常</a-menu-item>
        </a-menu>
        <a-button>
          批量更新状态 <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>
    
    <!-- 带选择功能的表格 -->
    <s-table
      ref="table"
      :columns="columns"
      :data="loadData"
      :rowSelection="rowSelection"
      :alert="alertConfig"
    >
      <!-- 列定义 -->
    </s-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  computed: {
    // 行选择配置
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
        // 支持全选功能
        selections: [
          {
            key: 'all-data',
            text: '全选',
            onSelect: () => {
              // 实现全选逻辑
            }
          }
        ]
      }
    },
    // 选中提示配置
    alertConfig() {
      return {
        show: this.selectedRowKeys.length > 0,
        message: `已选择 ${this.selectedRowKeys.length} 条数据`,
        type: 'info',
        closable: true,
        clear: () => {
          this.selectedRowKeys = []
        }
      }
    }
  },
  methods: {
    // 选择变化处理
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    
    // 批量删除
    handleBatchDelete() {
      this.$confirm({
        title: '确认删除',
        content: `您确定要删除选中的 ${this.selectedRowKeys.length} 条数据吗？`,
        onOk: () => {
          // 调用批量删除API
          return batchDelete(this.selectedRowKeys).then(() => {
            this.$message.success('删除成功')
            this.selectedRowKeys = []
            this.$refs.table.refresh()
          })
        }
      })
    },
    
    // 批量更新状态
    handleMenuClick({ key }) {
      const [type, value] = key.split('-')
      if (type === 'status') {
        // 调用批量更新API
        batchUpdateStatus({
          ids: this.selectedRowKeys,
          status: parseInt(value)
        }).then(() => {
          this.$message.success('状态更新成功')
          this.selectedRowKeys = []
          this.$refs.table.refresh()
        })
      }
    }
  }
}
</script>

注意事项：

  • 批量操作前必须添加二次确认
  • 大量数据操作时应添加进度提示
  • 提供"取消选择"功能提高操作容错性
  • 考虑添加操作权限控制

📈 数据统计：从展示到分析

问题场景：如何快速获取表格数据的统计信息，如总和、平均值等关键指标？

实现思路：通过配置列的needTotal属性启用统计功能，结合自定义统计方法实现复杂计算。

代码示例：数据统计实现

// 配置需要统计的列
const columns = [
  {
    title: '服务调用次数',
    dataIndex: 'callNo',
    sorter: true,
    needTotal: true,  // 启用统计功能
    // 自定义统计显示格式
    totalRender: (total) => `总计: ${total} 次`
  },
  {
    title: '响应时间(ms)',
    dataIndex: 'responseTime',
    sorter: true,
    needTotal: true,
    // 自定义统计计算方式
    totalMethod: (selectedRows) => {
      const sum = selectedRows.reduce((acc, row) => acc + row.responseTime, 0)
      const avg = selectedRows.length > 0 ? (sum / selectedRows.length).toFixed(2) : 0
      return `平均: ${avg} ms (共${selectedRows.length}条)`
    }
  }
]

// 在表格组件中使用统计功能
<s-table
  ref="table"
  :columns="columns"
  :data="loadData"
  :rowSelection="rowSelection"
  :showSummary="true"  // 显示统计行
/>

高级统计应用：

  • 实现加权平均值计算
  • 添加数据分布统计（如各状态占比）
  • 实现环比/同比计算
  • 结合图表展示统计结果

实现方案：构建企业级表格的完整流程

掌握了核心功能后，我们需要将这些功能有机组合，形成完整的企业级表格解决方案。以下是从0到1实现一个功能完善的高级表格的详细步骤。

步骤1：环境准备与基础配置

问题场景：如何快速搭建高级表格开发环境，确保组件正确引入和基础功能正常工作？

实现步骤：

  1. 项目初始化（如未使用Ant Design Vue Pro）
# 克隆项目仓库
git clone https://gitcode.com/gh_mirrors/antd/ant-design-vue-pro
cd ant-design-vue-pro
# 安装依赖
pnpm install
# 启动开发服务器
pnpm run serve
  1. 引入高级表格组件
// 在需要使用表格的页面中引入
import STable from '@/components/Table'

export default {
  components: {
    STable
  },
  // ...
}
  1. 基础表格配置
export default {
  data() {
    return {
      // 表格列定义
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          width: 60,
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '名称',
          dataIndex: 'name',
          sorter: true
        },
        // 更多列定义...
      ],
      // 表格参数
      tableParams: {
        pageSize: 10,
        currentPage: 1,
        // 其他查询参数
      }
    }
  },
  methods: {
    // 数据加载函数
    loadData(params) {
      // 合并分页参数与查询条件
      const queryParams = { ...this.tableParams, ...params }
      // 调用API获取数据
      return this.$api.get('/api/data/list', { params: queryParams })
    }
  }
}

步骤2：自定义渲染与交互实现

问题场景：如何将多个自定义功能组合应用，实现复杂业务场景下的表格展示与交互？

实现方案：结合自定义单元格、编辑功能和批量操作，实现一个完整的任务管理表格。

代码示例：综合应用

<template>
  <div class="task-table-container">
    <div class="table-toolbar">
      <!-- 工具栏内容 -->
    </div>
    
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      :rowSelection="rowSelection"
      :alert="alertConfig"
    >
      <!-- 序号列 -->
      <template slot="index" slot-scope="text, record, index">
        {{ (tableParams.currentPage - 1) * tableParams.pageSize + index + 1 }}
      </template>
      
      <!-- 状态列 -->
      <template slot="status" slot-scope="text">
        <a-tag :color="getStatusColor(text)">
          {{ getStatusText(text) }}
        </a-tag>
      </template>
      
      <!-- 操作列 -->
      <template slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a @click="handleDelete(record)" v-if="record.status !== 1">删除</a>
      </template>
    </s-table>
    
    <!-- 编辑模态框 -->
    <!-- ... -->
  </div>
</template>

<script>
import STable from '@/components/Table'
import { getTaskList, updateTask, deleteTask, batchUpdateStatus } from '@/api/manage'

export default {
  components: { STable },
  data() {
    return {
      columns: [
        { title: '序号', scopedSlots: { customRender: 'index' }, width: 60 },
        { title: '任务名称', dataIndex: 'name', sorter: true },
        { title: '负责人', dataIndex: 'owner' },
        { title: '状态', dataIndex: 'status', scopedSlots: { customRender: 'status' } },
        { title: '创建时间', dataIndex: 'createTime', sorter: true },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: 150 }
      ],
      tableParams: {
        currentPage: 1,
        pageSize: 10,
        keyword: ''
      },
      selectedRowKeys: [],
      selectedRows: [],
      modalVisible: false,
      currentRecord: null
    }
  },
  methods: {
    loadData(params) {
      return getTaskList({ ...this.tableParams, ...params })
    },
    // 其他方法实现...
  }
}
</script>

步骤3：状态管理与数据同步

问题场景：如何确保表格状态与后端数据同步，处理编辑、删除等操作后的界面更新？

实现方案：采用以下策略保证数据一致性：

  1. 操作成功后刷新数据
// 操作成功后刷新表格
handleOk() {
  // ...保存数据逻辑
  .then(() => {
    this.$message.success('操作成功')
    this.modalVisible = false
    // 刷新表格数据
    this.$refs.table.refresh()
  })
}
  1. 本地状态临时更新（乐观UI更新）
// 删除操作的乐观更新
handleDelete(record) {
  this.$confirm({
    title: '确认删除',
    content: `确定要删除任务"${record.name}"吗？`,
    onOk: () => {
      // 先从本地数据中移除（乐观更新）
      const currentData = this.$refs.table.data || []
      const newData = currentData.filter(item => item.id !== record.id)
      this.$refs.table.data = newData
      
      // 调用API实际删除
      return deleteTask(record.id).catch(() => {
        // 失败时恢复数据
        this.$refs.table.refresh()
        return Promise.reject(new Error('删除失败'))
      })
    }
  })
}
  1. 使用Vuex管理共享表格状态（多组件共享表格数据时）
// store/modules/task.js
const state = {
  taskList: [],
  total: 0,
  loading: false
}

const mutations = {
  SET_TASK_LIST(state, { list, total }) {
    state.taskList = list
    state.total = total
  },
  SET_LOADING(state, loading) {
    state.loading = loading
  }
}

const actions = {
  fetchTaskList({ commit }, params) {
    commit('SET_LOADING', true)
    return getTaskList(params).then(res => {
      commit('SET_TASK_LIST', {
        list: res.data,
        total: res.total
      })
      return res
    }).finally(() => {
      commit('SET_LOADING', false)
    })
  }
}

扩展应用：高级特性与性能优化

在掌握基础实现后，我们需要进一步优化表格性能，处理大数据场景，并解决常见问题。

性能优化：大数据量表格的渲染策略

问题场景：当表格数据量超过1000条时，如何避免页面卡顿，保持流畅的滚动和操作体验？

实现方案：

  1. 虚拟滚动实现 Ant Design Vue Pro的高级表格支持虚拟滚动，只需添加相关配置：
<s-table
  ref="table"
  :columns="columns"
  :data="loadData"
  :scroll="{ x: 1200, y: 600 }"  // 设置滚动区域
  :pagination="false"  // 关闭分页
  :virtualScroll="true"  // 启用虚拟滚动
  virtualItemHeight="54"  // 每行高度
/>
  1. 数据分片加载
// 实现无限滚动加载
loadMoreData() {
  if (this.loading || this.currentPage >= this.totalPages) return
  
  this.currentPage += 1
  this.loading = true
  
  fetchData({
    page: this.currentPage,
    pageSize: this.pageSize
  }).then(res => {
    // 追加数据而非替换
    this.dataList = [...this.dataList, ...res.data]
    this.loading = false
  })
}
  1. 优化渲染性能
  • 避免在customRender中使用复杂计算
  • 减少不必要的响应式数据
  • 使用v-memo优化列表渲染
  • 避免单元格内容包含过多DOM元素

常见问题排查：从错误到解决方案

在高级表格开发中，开发者常遇到以下问题：

  1. 表格数据不刷新

    • 检查loadData函数是否正确返回Promise
    • 确认调用了refresh()方法
    • 检查是否有缓存导致数据未更新
    • 解决方案：添加时间戳参数避免缓存，确保refresh()在操作成功后调用

  2. 自定义插槽不生效

    • 检查scopedSlots配置是否正确
    • 确认插槽名称与模板中定义一致
    • 检查是否使用了正确的组件（STable而非a-table）
    • 解决方案：使用slot-scope或v-slot正确绑定作用域变量

  3. 批量选择状态异常

    • 检查rowKey是否唯一且稳定
    • 确认selectedRowKeys正确绑定
    • 检查是否在数据更新后重置了选择状态
    • 解决方案：确保rowKey使用唯一ID，数据更新时清空选择状态

  4. 编辑后数据不更新

    • 检查是否正确调用了刷新方法
    • 确认API调用成功且返回新数据
    • 检查是否有本地缓存未清除
    • 解决方案：实现乐观更新或确保刷新方法正确执行

  5. 表格排序/筛选不生效

    • 检查列是否设置了sorter: true
    • 确认后端API支持排序参数
    • 检查loadData是否正确传递排序参数
    • 解决方案：实现前端排序或确保后端正确处理排序参数

高级交互：从基础到增强体验

为提升用户体验，可实现以下高级交互功能：

  1. 行内编辑增强
<template slot="editable" slot-scope="text, record">
  <div 
    @click="startEditing(record)"
    :class="{ 'editing': record.editing }"
  >
    <span v-if="!record.editing">{{ text }}</span>
    <a-input 
      v-if="record.editing" 
      :value="text"
      @change="(e) => handleChange(e, record)"
      @blur="stopEditing(record)"
      ref="input"
      @keydown.enter="stopEditing(record)"
    />
  </div>
</template>
  1. 拖拽排序实现
<s-table
  ref="table"
  :columns="columns"
  :data="dataList"
  rowKey="id"
>
  <template slot="drag" slot-scope="text, record, index">
    <a-icon type="menu" class="drag-handle" />
  </template>
</s-table>

<script>
import { Sortable } from 'sortablejs'

export default {
  mounted() {
    this.initDragSort()
  },
  methods: {
    initDragSort() {
      const tableBody = this.$refs.table.$el.querySelector('.ant-table-tbody')
      const _this = this
      
      new Sortable(tableBody, {
        handle: '.drag-handle',
        animation: 150,
        onEnd({ oldIndex, newIndex }) {
          // 处理排序逻辑
          _this.handleSortChange(oldIndex, newIndex)
        }
      })
    }
  }
}
</script>
  1. 表格导出功能
handleExport() {
  this.$confirm({
    title: '导出数据',
    content: '确定要导出当前表格数据吗？',
    onOk: () => {
      // 调用导出API
      exportTableData(this.queryParams).then(res => {
        // 创建下载链接
        const url = window.URL.createObjectURL(new Blob([res]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', `数据导出_${new Date().toISOString().slice(0,10)}.xlsx`)
        document.body.appendChild(link)
        link.click()
        // 清理
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
      })
    }
  })
}

实践练习：巩固与提升

为帮助读者巩固所学知识，以下提供几个实践练习题目：

  1. 练习1：实现可编辑标签列

    • 需求：实现一个标签列，支持点击标签编辑，输入完成后按回车保存
    • 提示：结合scopedSlots和v-if控制编辑状态，使用@keydown.enter事件处理保存

  2. 练习2：实现树形表格

    • 需求：基于高级表格实现树形结构数据展示，支持展开/折叠和层级显示
    • 提示：使用children属性定义子节点，配置indentSize控制缩进

  3. 练习3：表格数据可视化

    • 需求：在表格中嵌入迷你图表展示数据趋势，如访问量变化曲线
    • 提示：使用customRender结合ECharts或Recharts实现迷你图表

通过这些练习，您可以深入理解高级表格的灵活性和扩展性，为企业级应用开发打下坚实基础。

Ant Design Vue Pro的高级表格组件为企业级数据展示与交互提供了完整解决方案。通过本文介绍的自定义渲染、编辑功能、批量操作和数据统计等核心特性，结合性能优化策略，开发者可以构建出既美观又高效的表格应用。掌握这些技能不仅能提升开发效率，更能为用户提供出色的数据交互体验。

ant-design-vue-pro
👨🏻‍💻👩🏻‍💻 Use Ant Design Vue like a Pro! (vue2)
项目地址：https://gitcode.com/gh_mirrors/ant/ant-design-vue-pro
登录后查看全文

相关内容推荐

1 2025最新Ant Design Vue Pro使用指南：零基础到精通全攻略2 告别重复造轮子：Ant Design Vue Pro组件二次封装实战指南3 终极Ant Design Vue Pro完整指南：从零构建企业级应用4 Ant Design Vue Pro 移动端适配全攻略：从问题诊断到跨设备兼容实践5 Ant Design Vue Pro 高级表格实战指南：从需求到实现的完整路径6 从数据到决策：Ant Design Vue Pro中的用户注意力可视化方案7 ant-design-vue-pro中的虚拟滚动：处理大数据列表的高效方案8 Ant Design X Vue终极指南：5步构建企业级AI对话应用9 如何快速构建企业级Vue3应用？Ant Design Vue Pro Components全攻略10 从Vue2到Vue3：ant-design-vue-pro项目迁移完全指南
热门项目推荐
相关项目推荐

热门内容推荐

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实现家庭自动化

最新内容推荐

3种实用方案解决软件试用期管理难题SMUDebugTool：重新定义AMD Ryzen硬件调试的开源解决方案企业级视频本地化：技术架构与商业落地指南4个效率优化维度：Kronos金融大模型资源配置与训练实战指南3步打造高效键盘效率工具：MyKeymap个性化配置指南RapidOCR：企业级本地化OCR工具的技术解析与应用实践开源小说下载工具：实现网络小说本地存储的完整方案Detect-It-Easy技术教程：精准识别PyInstaller打包文件的核心方法GDevelop零代码游戏开发：3大痛点解决方案与实战案例高效解决知识星球内容备份难题：完全掌握zsxq-spider从爬取到PDF的知识管理方案

项目优选

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