使用vxe table组件时,edit-render配置$select',选中option后关闭cell的激活状态,显示选中option的value问题

时间:2021-05-13 16:33:56

在我的项目中使用vxe table组件时,edit-render配置{name: '$select', options: [{label:"脉搏",value:"maibo"},{label:"体温",value:"temp"}...]}。

当激活单元格的edit-render选中某个option后,

移走或关闭单元格(cell)的激活状态,此单元格会显示option的value而不是label,value是与后台交互的代码,label实时显示给用户辨识的,

结果如图:

使用vxe table组件时,edit-render配置$select',选中option后关闭cell的激活状态,显示选中option的value问题

移走或关闭单元格(cell)的激活状态后显示结果,如图:

使用vxe table组件时,edit-render配置$select',选中option后关闭cell的激活状态,显示选中option的value问题

此时显示的不是选中的option的label,而是其value值,正常情况应该是label显示在前端,value与后端交互使用。

为了找到解决方法,尝试了各种途径,最终才找到原因,问题出在vxe-column的属性formatter上,此属性不能和

属性edit-render配置{name: '$select'}一起用,会导致select选中后显示value。去除配置formatter后,结果如图:

使用vxe table组件时,edit-render配置$select',选中option后关闭cell的激活状态,显示选中option的value问题

关闭单元格编辑状态后结果如图:

使用vxe table组件时,edit-render配置$select',选中option后关闭cell的激活状态,显示选中option的value问题

去除vxe-column的属性formatter只是治标的方法,如果此时一定要使用formatter属性,可以自己处理,将

formatter的执行函数的cellValue参数(cellValue即是option选中项的value)与select的options匹配一下,

匹配到option选中项的label返回出去;没如此做过不知道是否可行,此处只是建议