vue2.6 Ag-grid 使用

最新推荐文章于 2025-04-13 22:06:40 发布

前端菜中菜

最新推荐文章于 2025-04-13 22:06:40 发布

阅读量5.4k

点赞数

文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_54966115/article/details/121971509

版权

本文档详细介绍了如何使用ag-grid-vue组件进行数据渲染和交互操作，包括设置HTML结构、配置数据源、监听单元格编辑事件、自定义列宽和固定定位、复选框功能以及单元格编辑和渲染。此外，还展示了如何处理单元格编辑停止时的数据校验和双击事件，以及自定义单元格渲染器实现复杂数据类型的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

中文文档：ag-grid中文教程 - itxst.com

一.HTML 结构

<ag-grid-vue
   class="ag-theme-alpine"
   id="myGrid"
   :rowData="rowData" //数据源
    @cellEditingStopped="onCellEditingStopped" // 输入停止直接执行 数据保存事件
    :gridOptions="gridOptions" //总配置项
  >
    <ag-grid-column
      v-for="item of gridOptions.columnDefs" //遍历配置项里的表头
      :key="item.prop || item.label" //防止 key值重复
      :field="item.field"  //接受的后端字段
      :headerName="item.headerName" //展示名字
      :width="item.width"
      :pinned="item.pinned" //固定定位 左或者右
      :checkboxSelection="item.checkboxSelection" //复选框勾选事件
      :headerCheckboxSelection="item.headerCheckboxSelection" //头部复选框勾选事件
      :singleClickEdit="item.singleClickEdit" //单元格编辑效果
      :cellEditorFramework="item.cellEditorFramework" //自定义组件配置
      :suppressMovable="item.suppressMovable" //单元格拖拽效果
      :cellRenderer="item.cellRenderer && MedalCellRenderer"// 渲染表格数据(输入框 ,下拉框,多 选框) 表格行自定义事件
      :cellClass=" item.cellClass ? item.cellClass == 'Referenceclass'
      ? Referenceclass
      : 'editinitstyle'
      : ''" //样式修改
      :editable="item.editable ? (item.editable == 'scPriceFunction' && scPriceFunction) 
      :false" //编辑权限以及校验
    ></ag-grid-column>
</ag-grid-vue>

二.data()

gridOptions: {
        rowSelection: 'multiple',
        suppressRowClickSelection: true,
        enableCellTextSelection: true,
        onRowClicked: (event) => {
          this.gridOptions.api.forEachNode(function(item, index) {
            if (index == event.rowIndex) {
              item.data.rowselected = true;
              item.setData(item.data);
            } else {
              item.data.rowselected = false;
              item.setData(item.data);
            }
          });
        },
        onCellDoubleClicked: (event) => {
          if (event.colDef.field === 'projectId' && event.data.opportunity.id) {
            路由跳转
          }
        },
        //拖拽列 拖拽到表格外 不会使其隐藏
        suppressDragLeaveHidesColumns: true,
        //拖拽回调
        onColumnMoved: (event) => {
          let list = [];
          list = event.api.columnController.allDisplayedColumns.map((item) => ({
            field: item.colId,
            pinned: item.pinned
          }));
          this.gridOptions.afterColumnDefs = list;
        },
        rowClassRules：{ag-grid注册使用权}
        rowDeselection: false,
        components: {
          medalCellRenderer: this.MedalCellRenderer
        },
        iShowAgGrid: false,
        //展示列
        columnDefs: [],
        //后台传的列的顺序 和 改变后的顺序
        afterColumnDefs: [],
        //所有的列
        beforeColumnDefs: [
          {
            headerName: 'Line Number',
            field: 'lineNumber',
            minwidth:'100',
            pinned: 'left'
          },
        ],

三.js

//单元格停止编辑时机
    onCellEditingStopped(params) {
     // 可以给填写的数据做正则校验
    },
    //判断单价
    scPriceFunction(params) { //根据当前行可以切换是否开启编辑
      if (this.isfalse == true) {
        return true;
      } else {
        return false;
      }
    },
    //渲染表格数据(输入框 ,下拉框,多 选框) 表格行自定义事件
    MedalCellRenderer(params) { //根据后端数据 创建对应DOM 例如 复选框checkbox
      if (params.colDef.field == 'isRecordedRebate') {
        var eDiv129 = document.createElement('div');
        eDiv129.innerHTML = '<input disabled class="check129" type="checkbox" />';
        let check129 = eDiv129.querySelectorAll('.check129')[0];
        if (params.data.isRecordedRebate) {
          check129.checked = 'checked';
        } else {
          check129.checked = '';
        };
        return eDiv129;
      };