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

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

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

结果如图:

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

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

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

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

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

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

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

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

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

  1. 使用element-ui的table组件时,渲染为html格式

    背景 今天在做vue的项目时,使用到 element-ui 的 table 组件,使用富文本编辑器进行新增操作后,发现 html格式 并没有被识别 原因 在 element-ui 中,table组件默 ...

  2. IView 使用Table组件时实现给某一列添加click事件

    通过给 columns 数据的项,设置一个函数 render,可以自定义渲染当前列,包括渲染自定义组件,它基于 Vue 的 Render 函数. render 函数传入两个参数,第一个是 h,第二个是 ...

  3. vue+element ui table组件封装,使用render渲染

    后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...

  4. React中使用Ant Table组件

    一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启 ...

  5. Ant Table组件

    http://www.cnblogs.com/hujunzheng/p/5689650.html React中使用Ant Table组件   v一.Ant Design of React http:/ ...

  6. iview中,table组件在缩进时产生的bug。

    问题描述: 在父元素因为缩进的关系撑开时,table组件不会因为父元素的撑开而自适应,问题如图 解决办法:在父一级的组件中使用table {width: 100% !important},强制使表格宽 ...

  7. iview使用之怎样通过render函数在table组件表头添加图标及判断多个状态

    在实际项目开发中,我们经常会用到各种各样的表格,比如在表格中填加下拉菜单,按钮,图标及可以根据状态显示对应文字等等,因为这段时间一直在做后台管理系统,所以表格用的就比较多,当然UI组件库我用的是ivi ...

  8. react ,ant Design UI中table组件合并单元格并展开详情的问题

    需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢?  单元格合并?  还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...

  9. iview中关于table组件内放入Input会失去焦点

    table里面的数据是一个数组,父组件传入的.子组件是截图的内容.当每个input框数据发生变化时,把数据传给父组件.在父组件做表单的提交. github内已经提到过这个问题(https://gith ...

随机推荐

  1. Float浮动(慕课网学习笔记)

    float浮动 属性:值 意义 float:left 左浮动 float:right 右浮动 float:none 不浮动 float:inherit 继承父元素浮动属性,若父元素没有浮动属性则失效 ...

  2. linux修改源镜像地址

    1.1 CentOS修改yum源镜像地址为:mirrors.163.com (也可以改为阿里云镜像) 1.首先备份系统自带yum源配置文件/etc/yum.repos.d/CentOS-Base.re ...

  3. Spring Data JPA:解析CriteriaBuilder

    源码 在Spring Data JPA相关的文章[地址]中提到了有哪几种方式可以构建Specification的实例,该处需要借助CriteriaBuilder,回顾一下Specification中t ...

  4. Go测试--main测试

    目录 简介 示例 简介 子测试的一个方便之处在于可以让多个测试共享Setup和Tear-down.但这种程度的共享有时并不满足需求,有时希望在整个测试程序做一些全局的setup和Tear-down,这 ...

  5. opencv入门系列教学(六)图像上的算术运算(加法、融合、按位运算)

    0.序言 这一篇博客我们将学习图像的几种算术运算,例如加法,减法,按位运算等. 1.图像加法 我们可以通过OpenCV函数 cv.add() 或仅通过numpy操作 res=img1+img2 res ...

  6. 《网页布局基础篇》—浮动布局和float属性

    浮动布局 <html> <head> <meta charset="utf-8"> <title>浮动</title> ...

  7. Win10 下安装Ubuntu 21.04桌面版 双系统 并设置win10为默认启动系统 详细教程

    @ 目录 〇.写在前面 〇 - Plus:如何进入BIOS 〇 - Plus - Plus:U盘启动快捷键 一.磁盘分区:Win10划分未分配空间 二.下载Ubuntu 21.04镜像 三.安装U盘启 ...

  8. Charles-模拟弱网环境

    在做弱网测试时,经常需要模拟各种网络环境,Charles恰好也提供了网络限制的功能,我们可以在"Proxy->Throttle Settings"路径下找到它,如下图所示. ...

  9. GoLang设计模式3 - 抽象工厂模式

    之前我们介绍了工厂设计模式,现在我们再看一下抽象工厂设计模式.抽象工程模式顾名思义就是对工厂模式的一层抽象,也是创建型模式的一种,通常用来创建一组存在相关性的对象. UML类图大致如下: 类图比较复杂 ...

  10. 虚拟数字存储表——SQLServer2012可高用

    窗口函数之虚拟数字辅助表 数字辅助表是一个整数序列,可以用它来完成多种不同的查询任务.数字表有很多任务,如生成日期和时间值序列,及分裂值列表.通常,建议在数据库中保存这样一个永久表,并填充尽可能多的数 ...