vue.js - 如何防止在 ag-grid 中使用自定义 vue 组件验证错误时关闭单元格编辑模式

Question

我已经成功地将我自己的组件呈现为 cellEditor，并且在休假时我希望它尝试验证值并在失败时阻止关闭。

如果我看this然后 https://www.ag-grid.com/javascript-grid-cell-editing/#editing-api有用于编辑的可取消回调函数。但是在这个回调函数中有没有办法访问当前实例化的组件？我认为这是处理此问题的最简单方法。

我正在使用 vee-validate，所以验证函数是异步的，请记住。

Answer 1

使用整行编辑。 创建一个全局变量，如

var problemRow = -1;

然后订阅这个事件:

 onRowEditingStarted: function (event) {
    if (problemRow!=-1 && event.rowIndex!=problemRow) {
        gridOptions.api.stopEditing();
        gridOptions.api.startEditingCell({
            rowIndex: problemRow,
            colKey: 'the column you want to focus',
        });
    }
},
onRowEditingStopped: function (event) {
    if (problemRow==-1) {
        if (event.data.firstName != "your validation") {
            problemRow = event.rowIndex
            gridOptions.api.startEditingCell({
                rowIndex: problemRow,
                colKey: 'the column you want to focus',
            });
        }
    }
    if (problemRow == event.rowIndex) {
        if (event.data.firstName != "your validation") {
            problemRow = event.rowIndex
            gridOptions.api.startEditingCell({
                rowIndex: problemRow,
                colKey: 'the column you want to focus',
            });
        }
        else{
            problemRow=-1;   
        }

    }
},