vxe-table表格校验失败后保持可以编辑状态

vxe-table表格校验失败后保持可以编辑状态

vxe-table表格校验失败后保持可以编辑状态_第1张图片
鼠标移出后可编辑状态消失

vxe-table表格校验失败后保持可以编辑状态_第2张图片
在edit-config设置为 autoClear: false 鼠标移出继续保持可编辑状态

<vxe-grid :edit-config="{trigger: 'dblclick', mode: 'row', showStatus: true, autoClear: false,activeMethod: activeRowMethod}" :edit-rules="validRules" ref="xGrid" v-bind="gridOptions" @page-change="handlePageChange">

vxe-table表格校验失败后保持可以编辑状态_第3张图片
双击其他行校验是否成功

async activeRowMethod ({ row, rowIndex }) {
  const $table = this.$refs.xGrid
  const errMap = await $table.validate().catch(errMap => errMap)
  if (errMap) {
    this.$XModal.message({ status: 'error', content: '校验不通过!' })
  } else {
    this.$XModal.message({ status: 'success', content: '校验成功!' })
  }
},

vxe-table表格校验失败后保持可以编辑状态_第4张图片

需要手动调用 clearActived 关闭编辑状态

const $table = this.$refs.xGrid
$table.clearActived().then(() => {
	// VXETable.modal.alert('success')
})

你可能感兴趣的:(前端,vxe-table)