13.ag-grid表格默认选中某行

最新推荐文章于 2024-08-27 13:27:26 发布

原创最新推荐文章于 2024-08-27 13:27:26 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

文章描述了如何在GF-Grid组件中配置rowClassRules以实现行选择功能，并在数据变化时自动调整列宽。还提及了onSelectionChanged事件处理和单元格点击事件的定义。

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

效果如下：
在这里插入图片描述

  <gf-grid :filterRemote="false" ref="elecGrid" class="elec-grid drag-column"
                             style="z-index: 3;"
                             :class="isBizDate ? 'isBizDate': ''"
                             height="100%"
                             grid-no="agnes-elec-process-field"
                             :options="elecGridOptions(this)"
                             :onDataLoaded="onDataLoaded"
                             @SelectionChanged="onSelectionChanged"
                    ></gf-grid>

在data的变量里找到elecGridOptions的配置项里添加 rowClassRules，渲染项，代码如下：

 elecGridOptions: (_that)=>{
                    return {
                        onRowDataChanged: (params) => {
                            params.columnApi.columnController.autoSizeAllColumns();
                            if(_that.elecGridSelected){
                                this.$nextTick(()=>{
                                    const selectIndex = _that.elecGridSelected.childIndex;
                                    params.api.ensureIndexVisible(selectIndex, 'middle');
                                    params.api.selectIndex(selectIndex);
                                })
                            }
                        },
                        onSelectionChanged: (params)=>{
                            _that.elecGridSelected = params.api.getSelectedNodes()[0];
                            _that.elecGridSelectedNodes = params.api.getSelectedNodes()
                        },
                        onCellClicked(params) {
                            // 定义可以被点击的单元格
                            const showDetailArr = ['baseId']
                            if (showDetailArr.includes(params.colDef.field)) {
                                _that.shows(params)
                            }
                        },
                        rowClassRules: {
                            'ag-row-selected': (params) => {
                                console.log("this.stepExcecId",params.data.stepExecId, _that.stepExecId);
                                if(params.data.stepExecId === _that.stepExecId){
                                    params.node.setSelected(true);   
                                    return true;
                                }
                                
                            }
                        }
                    
                    }