ag-grid 右键单元格动态改变单元格样式

最新推荐文章于 2025-06-20 17:08:16 发布

原创最新推荐文章于 2025-06-20 17:08:16 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ag-grid #单元格单击 #大量数据表格处理 #自定义 #vue

前端同时被 2 个专栏收录

10 篇文章

订阅专栏

Vue

8 篇文章

订阅专栏

本文档展示了如何在ag-grid表格库中使用vue实现单元格右键菜单，并动态改变选中单元格的样式。通过监听`onCellContextMenu`事件，自定义右键菜单项并更新单元格样式。同时，文中提供了完整的代码示例，包括创建数据、定义列定义、以及单元格点击和聚焦事件处理。

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

本文首发于个人站点 ag-grid 右键单元格动态改变单元格样式
笔者个人站点秋码记录

先来看下最终实现效果：
在这里插入图片描述

你在看这篇文章的时候，那就说明你项目中已经引入了ag-grid表格库，本文是基于 vue 实现的。

<ag-grid-vue :style="{height: tableHeight,width: '100%'}" class="flex-grow-1 flex-shrink-1 ag-theme-alpine"
								 :gridOptions="gridOptions"
								 :columnDefs="columnDefs"
								 :rowData="rowData"
								 :sideBar="sideBar"
								 :animateRows="true"
								 :autoGroupColumnDef="autoGroupColumnDef"
								
								 :defaultColDef="{
									sortable: true,
									resizable: true,
									filter: true,
									minWidth: 100,
								 }"

								 
								 :groupHeaders="true"
								 :suppressRowClickSelection="true"
								 rowSelection="multiple"

								 :allowContextMenuWithControlKey="true"
								 :getContextMenuItems="getContextMenuItems"

								 @grid-ready="onReady"
								 @cell-clicked="onCellClicked"
								 @cell-context-menu="onCellContextMenu"
								 @cell-focused="onCellFocused"
					>
					</ag-grid-vue>

首先定义两个全局变量，注意放在 export default语句外边

let selectRow = null,selectColumn = null

export default {
    data(){
        return {
            gridOptions: null,
            gridapi: null,
            columnDefs: null,
            rowData: null,
            showGrid: false,
            sideBar: false,
            rowCount: null,
            autoGroupColumnDef: null,
           
        }
    },
    methods: {
        //数据是模拟   不必太在意于
         createRowData() {
                const rowData = [];

                for (let i = 0; i < 200; i++) {
                   
                    rowData.push({
                        name: '张三'+i,
                        skills: {
                            android: Math.random() < 0.4,
                            html5: Math.random() < 0.4,
                            mac: Math.random() < 0.4,
                            windows: Math.random() < 0.4,
                            css: Math.random() < 0.4
                        },
                        dob: '张三'+i,
                        address: '张三'+i,
                        years: '2020',
                        proficiency: Math.round(Math.random() * 100),
                        country: '张三'+i,
                        continent: '张三'+i,
                        language: 'zh',
                        mobile: 134884552+'i',
                        landline: '张三'+i
                    });
                }

                this.rowData = rowData;
            },
            createColumnDefs() {
                this.columnDefs = [
                    {
                        headerName: '#', minWidth: 60, width: 60, checkboxSelection: true, sortable: false,
                        suppressMenu: true, pinned: true
                    },
                    {
                        headerName: 'Employee',
                        children: [
                            {
                                headerName: "Name", field: "name", editable: true,
                                width: 150, pinned: true,
                            },
                            {
                                headerName: "Country", field: "country", width: 150,
                            },
                            {
                                headerName: "DOB",
                                field: "dob",
                                width: 120,
                                pinned: true,
                    
                                filter: 'agDateColumnFilter',
                                columnGroupShow: 'open'
                            }
                        ]
                    },
                    {
                        headerName: 'IT Skills',
                        children: [
                            {
                                headerName: "Skills",
                                width: 125,
                                sortable: false,
                            },
                            {
                                headerName: "Proficiency",
                                field: "proficiency",
                                width: 120,
                            },
                        ]
                    },
                    {
                        headerName: 'Contact',
                        children: [
                            {
                                headerName: "Mobile",
                                field: "mobile",
                                width: 150,
                                filter: 'text'
                            },
                            {
                                headerName: "Land-line",
                                field: "landline",
                                width: 150,
                                filter: 'text'
                            },
                            {headerName: "Address", field: "address", width: 500, filter: 'text'}
                        ]
                    }
                ];
            },
        onReady(params) {
            console.log('onReady');

            this.gridapi = params.api;
            this.calculateRowCount();

            this.gridapi.sizeColumnsToFit();
        },
        
        //单元格点击事件
        onCellClicked(event) {
            //selectRow = event.data
            //selectColumn = event.colDef

        },
        
        /**
        * 右键弹出菜单
        */
        onCellContextMenu(event) {

            let headerDom = document.querySelectorAll('.ag-cell')
            for (const n of headerDom) {
                n.style.backgroundColor = '#fff'
                n.style.color = '#000'
            }

            var column = event.colDef.field;


            if (event.data === selectRow && event.colDef === selectColumn) {
                //return 'col-orange'
                event.colDef.cellStyle = { 'background-color': '#f60', 'color': '#fff' };
			}

            this.gridapi.refreshCells({
                force: true,
                columns: [column],
                rowNodes: [event.node]
            });
        
        
    },
        //单元获得焦点
        onCellFocused(event) {
            let rowData = this.gridapi.getRowNode(event.rowIndex)
            selectRow = rowData.data
            selectColumn = event.column.colDef
        },
   },
    beforeMount() {
        this.gridOptions = {};
        this.gridOptions.components = {agDateInput: DateComponent};
        this.createRowData();
        this.createColumnDefs();
        this.showGrid = true;
    },
}