EasyUI Forum

General Category => EasyUI for Vue => Topic started by: fengdie on January 19, 2019, 02:47:07 AM

Title: datagrid component cell edit mode, how to get the row index
Post by: fengdie on January 19, 2019, 02:47:07 AM

参考:https://www.jeasyui.com/demo-vue/demo.php?cname=datagrid&pitem=cellediting (https://www.jeasyui.com/demo-vue/demo.php?cname=datagrid&pitem=cellediting)

Title: Re: datagrid component cell edit mode, how to get the row index
Post by: jarry on January 19, 2019, 07:59:09 AM

You can get the 'rowIndex' from the 'slot-scope'.

Code:

<GridColumn field="listprice" title="List Price" align="right" :editable="true">
    <template slot="edit" slot-scope="{row,rowIndex}">
        ...
    </template>
</GridColumn>

Title: Re: datagrid component cell edit mode, how to get the row index
Post by: fengdie on January 19, 2019, 09:52:32 PM

I want to get the cell row index in the handleRemove function.

Code:


<div class="datagrid-toolbar">
    <table cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td><LinkButton iconCls="icon-add" :plain="true" @click="handleRemove">删除数据</LinkButton></td>
            </tr>
        </tbody>
    </table>
</div>
<DataGrid>.....</DataGrid>

methods: {
    handleRemove() {
        // get cell row index
    }
}

Title: Re: datagrid component cell edit mode, how to get the row index
Post by: jarry on January 21, 2019, 06:08:33 AM

When begin to edit a cell, the 'editBegin' event fires. You can get the current editing row and column.

Code:

<DataGrid :data="data" :clickToEdit="true" selectionMode="cell" editMode="cell" style="height:250px"
    @editBegin="onEditBegin($event)"
>