Ag-grid之在column添加icon

  • 定义RowCellRender
class RowCellRenderer {
    eGui: any;

    init(params: { param1: string, param2: string, param3: boolean }) {
        if (!params.isParamsDataNull) {
            this.eGui = document.createElement('span');
this.eGui.innerHTML = `<i class="dddd"></i>`;
        } else {
            this.eGui = '';
        }
    }
    getGui() {
        return this.eGui;
    }
}
  • 在gridOption里添加 
components: {
                // tslint:disable-next-line: no-use-before-declare
                rowCellRenderer: RowCellRenderer,
            }
  • 在column的setting里添加
 cellRendererSelector: (params) => {
                    const loanData: Item = params.data;
                    return {
                        component: 'rowCellRenderer',
                        params: {
                          ...
                            isParamsDataNull: ....,
                        }
                    };
                }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ag-grid-vue3是一个强大的Vue.js表格组件,用于展示和处理大量数据。要向ag-grid-vue3添加行,可以通过调用gridApi的相应方法实现。下面是添加行的步骤: 1. 获取gridApi对象 在ag-grid-vue3,可以通过以下代码获取gridApi对象: ```javascript <AgGridVue ... @grid-ready="onGridReady" ... /> ... methods: { onGridReady(params) { this.gridApi = params.api; ... } } ``` 在onGridReady函数,将gridApi对象保存在Vue实例的变量以便后续使用。 2. 添加行数据 要添加行数据,可以通过调用gridApi对象的applyTransaction方法实现。该方法需要传入一个Transaction对象作为参数,Transaction对象包含要添加的行数据。 ```javascript addRow() { const newRowData = { id: 4, name: 'John Doe', age: 30, gender: 'Male' }; const addTransaction = { add: [newRowData], }; this.gridApi.applyTransaction(addTransaction); } ``` 在上述代码,首先定义一个新行数据newRowData,然后创建一个Transaction对象addTransaction,其包含要添加的行数据。最后,调用gridApi的applyTransaction方法并将addTransaction作为参数传入即可。 3. 更新视图 添加行数据后,需要更新视图以显示新的行数据。可以通过调用gridApi对象的refreshCells方法实现: ```javascript addRow() { ... this.gridApi.applyTransaction(addTransaction); this.gridApi.refreshCells(); } ``` 在上述代码添加行数据后调用gridApi的refreshCells方法即可更新视图。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值