当前位置：首页 > news >正文

vxe-grid @edit-closed方法不被执行或者叫不触发

news 2025/9/29 8:16:30

配制vxegrid,vxetable去启用编辑列设置

1、一般我们在写编辑的时候，会这样去处理：

1）editConfig配制支持

editConfig: {trigger: 'click',mode: 'cell',showStatus: true,enabled: true,},

2）定义方法@edit-closed

@edit-closed="editClosedEvent"

function editClosedEvent({ row, column }) {console.log('editClosedEvent',row,column);
}

3) 定义editRender

{field: 'note',title: '注备',sortable: false,width: '20%',editRender: { name: '$input',attrs: { type: 'text',style: 'width: 100%',disabled: false},events: {keypress: onKeyPressEvent,input: updateRowStatus,blur: blurRow}},align: 'center',
}

通过以上的三步骤，一般是可以了。

分析可能的原因

2、不执行，是因为我们并没有在列设置中去定义editRender，所以不会去执行@edit-closed。

3、那么我们要如何在slots的情况下，去调用呢？

手工去触发方法

4、解决

手工去触发即可：

const $table = tableRef.value;if ($table) {// 手动触发 edit-closed 事件$table.clearEdit().then(() => {$table.updateData();// 手动调用 editClosedEvent 方法editClosedEvent({ row, column: { property: 'note' } });});}

通过以上的方法，就会自动去执行:footer-method="footerMethod"

启用表格底部汇总

5、启用表格汇总

:footer-method="footerMethod":show-footer="true"

/*** 自动计算合计*/const sumNum = (list: any[], field: string) => {let count = 0;list.forEach((item) => {count += Number(item[field]);});return Number(count).toFixed(2);};/*** 合计栏*/const footerMethod: VxeTablePropTypes.FooterMethod = ({ columns, data }) => {return [columns.map((column, columnIndex) => {if (columnIndex === 0) {return '合计';}if (columnIndex == 5) {return `${sumNum(data, 'je')}`;}return '';}),];};