vue2使用ag-grid表格

news2024/11/8 19:30:38

ag-grid官网:Vue Grid: Custom Components | AG Grid

根据官方文档说的AG Grid no longer supports Vue 2. The last version to support Vue 2 is AG Grid v31.3.,目前只有v31.3.版本支持vue2。

以下是官方给的demo

Vue Grid: Get Started with AG Grid | AG GridIn this article, we will walk you through the necessary steps to add AG Grid (both are covered) to an existing Vue project, configure some of the essential features of it. We will show you some of the fundamentals of the grid (passing properties, using the API, etc). As a bonus, we will also tweak the grid's visual appearance using Sass variables. Download AG Grid v32.1.0 today: The best Vue Table & Vue Data Grid in the world.icon-default.png?t=O83Ahttps://www.ag-grid.com/vue-data-grid/vue2/#reference-App.vue

1、在vue组件中引入使用

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

<script>
  import "ag-grid-community/styles/ag-grid.css";
  import "ag-grid-community/styles/ag-theme-balham.css";
  import { AgGridVue } from "ag-grid-vue/lib/main.cjs";
  export default {
    components: {
      AgGridVue
    },
    data() {
      return {
        columnDefs: [ // 表格列配置
          { // 勾选列
            headerName: "",
            checkboxSelection: true,
            headerCheckboxSelection: true,
            pinned: 'left',
            width: 50
          },
          {
            headerName: '序号',
            field: 'index',
            pinned: 'left', // 列固定到左边
            sortable: false, // 禁用自带排序,默认为true
            width: 60,
            suppressMovable: true, // 禁用拖拽表头,Set to true if you do not want this column to be movable via dragging.
            cellRenderer: function (params) { // 自定义单元格渲染内容
              return parseInt(params.node.id) + 1
            },
            cellStyle: {
              'text-align': 'center' // 表格文字居中, 不包括表头文字
            }
          },
          {
            headerName: '回复备注',
            suppressMovable: true,
            field: "confirmComment",
            editable: (params) => { // 是否可编辑,true/false/function
              // console.log(params)
              return params.data.action === 'Confirm(回复)' && this.userType === 'VENDOR'
            },
            sortable: false,
            width: 150,
            cellStyle: {
              'text-align': 'center'
            }
          },
          {
            headerName: '数量',
            suppressMovable: true,
            field: "inProcessQty",
            editable: (params) => {
              // console.log(params)
              return params.data.action === 'Confirm(回复)' && this.userType === 'VENDOR'
            },
            cellDataType: 'number', // 数据类型,
            sortable: false,
            width: 150,
            cellStyle: {
              'text-align': 'center'
            }
          },
          {
            headerName: '第一周',
            suppressMovable: true,
            sortable: false,
            cellStyle: {
              'text-align': 'center'
            },
            children: [
              {
                headerName: '第一天',
                suppressMovable: true,
                sortable: false,
                cellStyle: {
                  'text-align': 'center'
                },
                children: [
                  {
                    headerName: '9.2白班',
                    suppressMovable: true,
                    field: "day",
                    sortable: false,
                    cellStyle: {
                      'text-align': 'center'
                    },
                  },
                  {
                    headerName: '9.2夜班',
                    suppressMovable: true,
                    field: "night",
                    sortable: false,
                    cellStyle: {
                      'text-align': 'center'
                    },
                  }
                ]
              }
            ]
          }
        ],
        rowData: [], // 表格数据
        gridOptions: { // 表格相关配置
          enableCellTextSelection: true, // 允许复制单元格内容
          enableRangeSelection: true,
          rowSelection: 'multiple',  // 可勾选多行
          suppressRowClickSelection: true,
        }
      }
    },
    created() {
      this.getTableData()
    },
    methods: {
      onGridReady(params) {
        this.gridApi = params.api
        console.log(params, 'params')
      },
      getTableData(){
        this.$http({url: 'xxx'}).then(res => {
          this.gridApi.setColumnDefs(res);
        })
      },
      onCellEditingStopped(event){
        console.log(event, 'cell stop edit')
      },
      handleCellClick(event){
        console.log(event, 'click cell')
      },
    }
  };
</script>

<style scoped lang="scss">
  .the_returnedGoodsNoticeList_wrapper {
    & /deep/ .el-form .el-row .el-form-item:first-child {
      width:100%
    }
  }
  .ag-theme-balham {
    /* disable all borders */
    /*--ag-borders: none;*/
    /* then add back a border between rows */
    --ag-row-border-style: solid;
    --ag-row-border-width: 1px;
    --ag-row-border-color: #dfe6ec;
    /* and between columns */
    --ag-cell-horizontal-border: #dfe6ec;
  }
  .ag-theme-balham {
    --ag-header-height: 30px;
    --ag-header-foreground-color: black;
    --ag-header-background-color:  #88c1f4;
    --ag-cell-horizontal-border: solid #dfe6ec;
    /*--ag-header-cell-hover-background-color: rgb(80, 40, 140);*/
    /*--ag-header-cell-moving-background-color: rgb(80, 40, 140);*/
    --ag-header-column-separator-display: block;
    --ag-header-column-separator-height: 100%;
    /*--ag-header-column-separator-width: 2px;*/
    --ag-header-column-separator-color: white;

    --ag-header-column-resize-handle-display: block;
    --ag-header-column-resize-handle-height: 25%;
    /*--ag-header-column-resize-handle-width: 5px;*/
    --ag-header-column-resize-handle-color: white;
  }
  /* 固定列右边框 */
  /deep/ .ag-pinned-left-header {
    border-right: 1px solid white;
  }
 /* .ag-theme-balham .ag-header {
    font-family: cursive;
  }
  .ag-theme-balham .ag-header-group-cell {
    font-weight: normal;
    font-size: 22px;
  }
  .ag-theme-balham .ag-header-cell {
    font-size: 18px;
  }*/
  /*表头文字居中*/
  /deep/ .ag-theme-balham [class^='ag-'],
  .ag-theme-balham [class^='ag-']:focus,
  .ag-theme-balham [class^='ag-']:after,
  .ag-theme-balham [class^='ag-']:before {
    text-align: center;
  }
  /deep/ .ag-header-cell-text{
    text-align: center ;
    width: 100%;
  }
  /deep/ .ag-header-cell{
    border-top: 1px solid white !important;
  }
  /deep/ .ag-header-group-cell-with-group {
    border-top: 1px solid white !important;
  }
  /deep/ .ag-header-group-cell {
    justify-content: center;
  }
</style>

以上是我实践的demo,其中需要注意的点有:

1、包的引入,我与官方给的不一样,因为我按照官方方法报错了,

2、需要勾选列,要在columnDefs里面配置这一列

3、代码中的css包括修改表头背景、表头文字居中、表格边框

效果差不多如下图:

我这只是皮毛,基础用法,ag-grid还有很多很多功能属性有待探索。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2129847.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C# WPF编程-串口通信

C# WPF编程-串口通信 串口通信1. NuGet安装System.IO.Ports2. 界面布局XAML3. C#代码4. 运行效果源码下载 串口通信 1. NuGet安装System.IO.Ports 2. 界面布局XAML <Window x:Class"BlocksTools.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006…

Python 从入门到实战15(字符串其它操作)

我们的目标是&#xff1a;通过这一套资料学习下来&#xff0c;通过熟练掌握python基础&#xff0c;然后结合经典实例、实践相结合&#xff0c;使我们完全掌握python&#xff0c;并做到独立完成项目开发的能力。 上篇文章我们通过举例学习了字符串一些操作说明。今天继续讨论字符…

Java数组08:ArrayList简介

本节内容视频链接&#xff1a; Java关于ArrayList的简单用法与介绍_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1CC4y177CW/?spm_id_from333.337.search-card.all.click&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5Java的ArrayList简介_哔哩哔哩_bilibilihttps:…

Leetcode面试经典150题-27.移除元素

解法都在代码里&#xff0c;不懂就留言或者私信 超级简单的题&#xff0c;一般出现在笔试里&#xff0c;但是不知道为啥字节高频题里会排的那么靠前 class Solution {public int removeElement(int[] nums, int val) {/**如果数组为空&#xff0c;没什么可操作的&#xff0c;…

产业园服务体系建设,是否已全面覆盖企业成长的每一个阶段?

在当今竞争激烈的商业环境中&#xff0c;产业园作为企业发展的重要载体&#xff0c;其服务体系的完善程度至关重要。那么&#xff0c;产业园服务体系建设&#xff0c;是否已全面覆盖企业成长的每一个阶段呢&#xff1f; 从企业的初创期来看&#xff0c;产业园可以提供办公场地的…

【JUC】15-ThreadLocal线程局部变量

1. ThreadLocal ThreadLocal提供线程局部变量。每个线程在访问ThreadLocal实例的时候都有自己的、独立的变量副本。ThreadLocal实例通常是类中的私有静态字段&#xff0c;使用它的目的是希望将状态(用户ID或事务ID)与线程关联起来。 class Saler {ThreadLocal<Integer> …

基于Boost库的搜索引擎开发实践

目录 1.项目相关背景2.宏观原理3.相关技术栈和环境4.正排、倒排索引原理5.去标签和数据清洗模块parser5.1.认识标签5.2.准备数据源5.3.编写数据清洗代码parser5.3.1.编写读取文件Readfile5.3.2.编写分析文件Anafile5.3.2.编写保存清洗后数据SaveHtml5.3.2.测试parser 6.编写索引…

HPM6E00:PWM V2使用指南

先楫推出的HPM6E00系列芯片&#xff0c;PWM功能升级到了V2版本。和V1版本不同的是&#xff0c;V2版本的每组PWM模块包含4个独立的PWM生成模块&#xff0c;每个PWM生成模块包含一个counter和4个比较器&#xff0c;可以生成4组频率不同的PWM波。每个PWM生成模块&#xff0c;对应生…

​​​​通过给定一个全屏的位置得到该位置处是哪一个控件、 遍历窗口中的每一个元素

通过给定一个全屏的位置得到该位置处是哪一个控件&#xff08;以下方法&#xff09; [static] QWidget *QApplication::widgetAt(const QPoint &point) 场景&#xff1a;通过位置获取该位置处的widget后&#xff0c;然后进行判断&#xff0c;是不是某个或某些控件&#x…

韩语中的多义词 (치다)柯桥学韩语到蓝天广场附近

치다 1. 表示用毛笔、铅笔等点点、划线或者绘图。 예: 밑줄을 치다. 划底线 중요한 부분에 동그라미를 쳤다. 在重要的部分画上圆圈。 2. 表示倾倒少量液体或者粉末之类的东西。 예: 싱거우니 소금을 쳐야겠다. 味道淡&#xff0c;得再撒点盐。 기계에 기름을 치다. 给机…

小众创新组合!LightGBM+BO-Transformer-LSTM多变量回归交通流量预测(Matlab)

小众创新组合&#xff01;LightGBMBO-Transformer-LSTM多变量回归交通流量预测(Matlab) 目录 小众创新组合&#xff01;LightGBMBO-Transformer-LSTM多变量回归交通流量预测(Matlab)效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现LightGBMBO-Transformer-L…

陈坤2024行走的力量 走向山野感受距离自然更近的地方

近日&#xff0c;由陈坤发起的心灵建设类项目“行走的力量”在西藏林芝圆满完成&#xff0c;今年陈坤和行者们重返西藏&#xff0c;在海拔3500-4700的高原行走了6天5夜&#xff0c;从城市走向山间&#xff0c;感受自然里的生活&#xff0c;用行走的方式&#xff0c;让自己慢下来…

【C++ Primer Plus习题】15.4

大家好,这里是国中之林! ❥前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。有兴趣的可以点点进去看看← 问题: 解答: main.cpp #include <iostream> #include "sales.h"…

第二期: 第三节 裸机代码如何烧写

这个 过程其实 需要在 编写了 驱动之后&#xff0c; 再进行。 因为 要烧写 代码&#xff0c; 你必须 要有一份&#xff0c; 可以烧写的代码。 这里比较重要的是 secureCRT 的安装流程。 这里忘记怎么安装的了。 大致就是 &#xff0c; 先安装 secureCRT , 然后 在破解。不破…

博弈论专题一(NIM游戏)

Nim游戏 重点结论&#xff1a;对于一个Nim游戏的局面(a1,a2,...,an)&#xff0c;它是P-position当且仅当a1^a2^...^an0&#xff0c;其中^表示位异或(xor)运算。 (本篇只做简单的结论描述,详细证明过程请看这篇博客) Nim和 堆物品&#xff0c;每堆 ai 个&#xff0c;两个玩家…

Linux系统:chown命令

1、命令详解&#xff1a; chown命令用于设置文件所有者和文件关联组的命令&#xff0c;全称为change directory。在Linux当中默认文件均有拥有者&#xff0c;可以利用 chown 将指定文件的拥有者改为指定的用户或组&#xff0c;输入参数时用户可以是用户名或者用户 ID&#xff0…

零基础如何学会Appium自动化测试?

前言 appium是一款移动自动化测试工具&#xff0c;经常被用于实现UI自动化测试&#xff0c;其可支持安卓和IOS两大平台&#xff0c;还支持多种编程&#xff0c;因而得到了广泛的应用。此处便是立足于安卓平台&#xff0c;借助appium工具&#xff0c;使用python语言实现简单的自…

GUI编程09:鼠标监听事件、模拟画图工具

视频链接&#xff1a;11、鼠标监听事件、模拟画图工具_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1DJ411B75F?p11&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5 模拟画图工具的实现逻辑图&#xff1a; 实现代码&#xff1a; package com.yundait.lesson03;impo…

大模型分离架构学习记录

GPU Direct GPU 网络的情况已经发生了很大变化。每个 GPU 都有自己的内部互联&#xff0c;例如 NVIDIA 的 A100 或 H800&#xff0c;它们内部的 NVLink 互联可以达到 600GB 甚至 900GB。这种内部互联与外部以太网网络集群设计之间存在耦合关系。GPU 是单机多网卡的&#xff0c…

Mini打印机复刻过程(外设绘制)

充电管理 充电管理模块采用ME4054BM5G-N 典型应用电路 ME4054B-N的典型应用电路中&#xff0c;输入为4.5V-6.5V&#xff0c;用于给4.2V的锂电池充电。关键元件包括&#xff1a; LED指示灯&#xff1a;通过1kΩ电阻限流&#xff0c;显示充电状态。2kΩ电阻&#xff08;PROG引脚…