五冶项目学习总结Vue 3 中全局注册组件手动引入 app.component() 用于在 Vue 3 中全局注册组件

Vue 3 中全局注册组件

手动引入

app.component() 用于在 Vue 3 中全局注册组件

// 全局注册项目的自定义UI组件
import GComponents from "@/ui/index.js"
for (const [key,component] of Object.entries(GComponents)) {
    app.component(key, component);
}

自动引入

使用 Vite 插件 unplugin-vue-components

步骤：

安装插件：
```
npm install unplugin-vue-components -D
```

配置 vite.config.js：

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 如果需要支持 Element Plus 等 UI 库

export default defineConfig({
  plugins: [
    Components({
      // 自动扫描并注册 components 目录下的组件
      dirs: ['src/components'],
      // 生成自动导入的 TypeScript 类型声明文件（可选）
      dts: 'src/components.d.ts',
      // 解析 UI 库组件（如 Element Plus、Ant Design Vue 等）
      resolvers: [ElementPlusResolver()]
    })
  ]
})

自定义UI组件

layout组件

i-modal-wrapper

使用slot插槽自定义内容区域，通过footer/footerBefore具名插槽定义底部区域(通常为确定、关闭按钮)，默认高度为

i-block-area

使用slot插槽自定义内容区域，通过toolbar具名插槽定义工具栏，点击标题左边的按钮实现收起与展开
主要用于表格、详情页等区域展示

i-form-area

主要用于表单区域，通过props属性column控制一行展示类目数量，默认一行展示3条，最多展示4条。
组件中通过css flex: 0 0 <width>控制类目宽度。
flex: 0 0 <width> ：强制元素保持固定尺寸，适合需要精确控制布局的场景

i-form-wrapper

与el-form-item功能类似，但不能替代el-form-item实现表单验证。在el-form内部尽量使用el-form-item，非el-form内部要实现类似的布局可使用i-form-wrapper。

i-search-area

查询区域，左侧为查询条件，右侧为操作按钮。
左侧查询条件限定一行展示3条类目，右侧操作按钮为查询与清空，清空按钮默认不展示，可通过props属性showResetBtn控制清空按钮展示与否。通过slot插槽自定义查询条件，查询条件一般使用i-form-wrapper编写。

i-table-toolbar

用于编写表格上方的工具条，左侧一般为按钮，右侧为分页。

AG Grid 表格

为什么我会说是一个非常强大的组件呢，很多人就会问了，我使用elementplus里的表格组件那不是一样的吗，哎nonono，
AgGridVue适用于各种数据密集型应用,尤其适合以下场景: 数据分析应用:通过提供强大的排序、过滤和聚合功能，
能够处理大规模数据集，支持虚拟滚动和高效的数据处理，从而提供平滑的用户体验，即使在处理大量数据时也能保持快速响应。
用人话来说就是特别特别多的数据用他来展示不会卡，满足特别特别多的筛选条件，能够完成特别特别多的功能，像是本人公司的项目少则五千条数据，多则十万条，光筛选条件就有俩百多个，没有一款强大的组件怎么能行呢，话不多说往下看

Table 是两种不同的表格组件，分别适用于不同的场景和需求。以下是它们的主要区别：

1. 功能与复杂度

AG Grid
- 是一个专业级的数据网格（Data Grid），支持高性能渲染（如虚拟滚动、大数据量处理），适用于企业级复杂表格需求17。
- 提供丰富的功能，如分组、聚合、排序、过滤、列拖拽、单元格编辑、Excel 导出等13。
- 支持树形数据、主从表、跨表计算、图表集成等高级功能7。
- 有社区版（免费）和企业版（付费） ，企业版提供更高级的功能（如 Excel 样式、高级图表等）1。
Element Plus Table
- 是一个基于 Vue 3 的 UI 组件库中的表格，适用于基础到中级的表格需求，如数据展示、简单排序、分页等46。
- 支持固定列、表头、斑马纹、行选择等常见功能，但原生不支持虚拟滚动（需手动实现或使用第三方扩展）47。
- 更适合轻量级应用，如后台管理系统、表单数据展示等4。

2. 性能

AG Grid
- 优化了大数据量（如 100 万行）的渲染，采用虚拟滚动和对象池技术，确保流畅交互17。
- 在排序、过滤、编辑等操作上性能优异，适用于金融、数据分析等高性能场景1。
Element Plus Table
- 在数据量较大（如超过 1000 行）时可能出现卡顿，需要手动优化（如分页、懒加载）7。
- 适合中小规模数据展示，但原生不支持虚拟滚动，需额外实现4。

3. 可扩展性

AG Grid
- 提供高度可定制的 API，支持自定义单元格渲染、复杂交互逻辑等3。
- 支持React、Angular、Vue 等多种框架，灵活性高1。
Element Plus Table
- 主要针对 Vue 3 生态，扩展性依赖 Vue 的插槽（Slots）和自定义组件46。
- 可通过二次封装增强功能（如可编辑表格、列拖拽等），但不如 AG Grid 灵活46。

4. Excel 兼容性

AG Grid
- 提供Excel 风格的公式计算、单元格合并、条件格式等功能，适合需要 Excel 类操作体验的场景7。
- 支持Excel 导出（企业版提供更高级的导出选项）1。
Element Plus Table
- 原生不支持 Excel 公式计算，需额外集成库（如 xlsx）实现导出功能5。
- 适用于简单数据展示，但不适合复杂 Excel 类交互需求7。

5. 学习成本与维护

AG Grid
- 功能强大但学习曲线较陡，适合有复杂需求的团队1。
- 社区版免费，但企业版功能需付费1。
Element Plus Table
- 上手简单，适合快速开发 Vue 3 项目4。
- 完全开源，适合预算有限的项目4。

总结对比表

对比项	AG Grid	Element Plus Table
适用场景	企业级大数据表格、金融分析	轻量级数据展示、后台管理
性能	支持百万级数据，虚拟滚动	千级数据，需手动优化
功能	分组、聚合、Excel 公式	基础排序、分页、固定列
Excel 兼容性	强（支持公式、导出）	弱（需额外库支持）
扩展性	高（支持多框架）	中（依赖 Vue 生态）
学习成本	较高	较低
授权模式	社区版免费，企业版付费	完全开源

安装

1、安装依赖

npm install ag-grid-community ag-grid-vue3 --save

核心组件：ag-grid-vue3
提供基础样式：ag-grid-community

2、引入样式在 main.js 引入 AG Grid 的样式文件，可自定义样式进行覆盖，并注册全局组件

import { AgGridVue } from "ag-grid-vue3";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
...此处可引入自定义样式文件
app.component("ag-grid-vue", AgGridVue);

使用

基础使用

在模板中定义表格容器，绑定列定义（columnDefs）和数据（rowData）：

<template>
  <div class="ag-theme-alpine" style="height: 500px; width: 100%;">
    <ag-grid-vue
      :columnDefs="columnDefs"
      :rowData="rowData"
      @grid-ready="onGridReady"
    ></ag-grid-vue>
  </div>
</template>

const columnDefs = [
  { headerName: "Name", field: "name", sortable: true, filter: true },
  { headerName: "Age", field: "age", editable: true }
]
const rowData = [
  { name: "John", age: 30 },
  { name: "Jane", age: 28 }
]
let gridApi;
const onGridReady = (params) => {
    gridApi = params.api;
    params.api.sizeColumnsToFit(); // 自适应列宽
}

核心配置

 <AgGridVue
      :style="'width:100%;height:' + props.height + 'px'"//设置表格的内联样式，宽度为100%，高度根据props.height的值动态设置
      class="ag-theme-alpine" //使用ag-theme-alpine CSS类为表格应用Alpine主题样式。
      :class="activeClass.join(' ')"//动态绑定附加的CSS类到表格上，类名由activeClass数组中的值组成。
      :columnDefs="columns"//定义表格的列配置（如标题、排序、过滤等），使用columns对象。
      :rowData="gridData"//提供表格显示的数据，使用gridData数组。
      rowSelection="multiple"//允许选择多行。
      @grid-ready="onGridReady"//表格初始化完成时触发的事件处理函数。
      :rowDeselection="true"//允许点击已选择的行来取消选择。
      :enableRangeSelection="true"//启用选择一系列单元格或行的功能。

      :suppressCopyRowsToClipboard="true"//防止将行数据复制到剪贴板。
      :statusBar="{
        // statusPanels: [
        //   // { statusPanel: 'agTotalAndFilteredRowCountComponent', align: 'left' },
        //   // { statusPanel: 'agSelectedRowCountComponent', align: 'left' }
        // ],
      }" //配置表格的状态栏。在你的代码中被注释掉了，但可以用于显示各种状态面板。
      :gridOptions="props.gridOptions"//从props.gridOptions中传递额外的表格选项，以进行自定义配置。
      :getContextMenuItems="getContextMenuItems"//提供一个函数来自定义右键菜单项。
      @sortChanged="refreshEvenRowsCurrencyData"//排序发生变化时触发的事件处理函数，用于根据新的排序顺序刷新数据。
      @filterChanged="refreshEvenRowsCurrencyData"//过滤条件发生变化时触发的事件处理函数，用于根据新的过滤条件刷新数据。
      @rowClicked="props.rowClick"//行被点击时触发的事件处理函数，用于执行自定义函数。
      @rowDoubleClicked="props.rowDoubleClicked"//行被双击时触发的事件处理函数，用于执行自定义函数。
      animateRows //启用行动画，用于行数据的添加或删除时的视觉效果。
      :suppressDragLeaveHidesColumns="true" //防止在将列拖动到表格外部时列被隐藏。
      :suppressMakeColumnVisibleAfterUnGroup="true" //防止在取消分组后自动显示列。
      :rowGroupPanelShow="props.autoGroupColumnDef ? 'always' : false" //控制行分组面板的显示。如果props.autoGroupColumnDef被设置，则总是显示；否则，隐藏。
      :groupSelectsChildren="true" //选择一个分组行时，所有其子行也会被选中。
      :suppressAggFuncInHeader="true" //防止在列头显示聚合函数。
      :autoGroupColumnDef="autoGroupColumnDef" //定义自动分组列的配置，用于数据分组。
      :masterDetail="true" //启用主从详细视图，允许在行中显示嵌套的详细信息。
      :localeText="localeText" //提供表格的本地化文本，基于localeText。
      :rowHeight="props.rowHeight" //根据props.rowHeight设置行的高度。
      @column-moved="onColumnMoved" //列移动时触发的事件处理函数，用于执行自定义函数。
      @column-resized="onColumnResized" //列大小调整时触发的事件处理函数，用于执行自定义函数。
      :suppressColumnVirtualisation="true" //禁用列虚拟化，这会影响性能，因为它会一次性渲染所有列，而不是仅渲染可见的列。
      :pinnedBottomRowData="pinnedBottomRowData" //将一组固定的数据行固定在表格的底部。这个属性接受一个数组，其中包含要固定在表格底部的行数据。
    >
    </AgGridVue>

注意项

1、使用push添加表格数据或者通过索引更改表格中某个数据，会导致表格不更新。需要调用下面的方法来进行更新：

gridApiList.value.applyTransaction("update", gridOptionsList.rowData);

海康视频播放

1、创建WebControl实例与启动插件

2、创建视频播放窗口

3、初始化

4、监听resize事件以及scroll事件，保证视频播放窗口大小以及位置

五冶项目学习总结