使用vxe table组件时,edit-render配置$select',选中option后关闭cell的激活状态,显示选中option的value问题
在我的项目中使用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问题的更多相关文章
- 使用element-ui的table组件时,渲染为html格式
背景 今天在做vue的项目时,使用到 element-ui 的 table 组件,使用富文本编辑器进行新增操作后,发现 html格式 并没有被识别 原因 在 element-ui 中,table组件默 ...
- IView 使用Table组件时实现给某一列添加click事件
通过给 columns 数据的项,设置一个函数 render,可以自定义渲染当前列,包括渲染自定义组件,它基于 Vue 的 Render 函数. render 函数传入两个参数,第一个是 h,第二个是 ...
- vue+element ui table组件封装,使用render渲染
后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...
- React中使用Ant Table组件
一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启 ...
- Ant Table组件
http://www.cnblogs.com/hujunzheng/p/5689650.html React中使用Ant Table组件 v一.Ant Design of React http:/ ...
- iview中,table组件在缩进时产生的bug。
问题描述: 在父元素因为缩进的关系撑开时,table组件不会因为父元素的撑开而自适应,问题如图 解决办法:在父一级的组件中使用table {width: 100% !important},强制使表格宽 ...
- iview使用之怎样通过render函数在table组件表头添加图标及判断多个状态
在实际项目开发中,我们经常会用到各种各样的表格,比如在表格中填加下拉菜单,按钮,图标及可以根据状态显示对应文字等等,因为这段时间一直在做后台管理系统,所以表格用的就比较多,当然UI组件库我用的是ivi ...
- react ,ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
- iview中关于table组件内放入Input会失去焦点
table里面的数据是一个数组,父组件传入的.子组件是截图的内容.当每个input框数据发生变化时,把数据传给父组件.在父组件做表单的提交. github内已经提到过这个问题(https://gith ...
随机推荐
- Redis缓存雪崩、缓存穿透、热点key
转载自 https://blog.csdn.net/wang0112233/article/details/79558612 https://www.sohu.com/a/230787856_231 ...
- Dijkstra链路状态选路算法
- 微信小程序学习笔记一 小程序介绍 & 前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
- Playwright-python 教程
安装 pip install playwright -i https://mirrors.aliyun.com/pypi/simple/ 使用阿里源,下载速度快一点. python -m playwr ...
- webpack编译后的代码如何在浏览器执行
浏览器是无法直接使用模块之间的commonjs或es6,webpack在打包时做了什么处理,才能让浏览器能够执行呢,往下看吧. 使用commonjs语法 先看下写的代码, app.js minus.j ...
- win命令
netstat -nao | findstr "8888"taskkill /pid 15064 /f清理端口被占用win+r进入cmdcmd窗口中输入notepad进入记事本sh ...
- Qt5中用QLCDNumber显示时间
编程中经常要用到时间的显示,因此在这总结一下在Qt中如何显示时间.废话不多说,直接上代码,简单明了,一看就懂~~ mydialog.h 文件 #ifndef MYDIALOG_H #define MY ...
- JavaWeb_MVC 设计模式
Servlet缺点:(1)用servlet进行显示(out)会很麻烦,因为servlet是一个类,托福ibt并不擅长做显示:(2)servlet直接访问数据表的话,servlet内的访问和操作数据表的 ...
- 剑指 Offer 31. 栈的压入、弹出序列
剑指 Offer 31. 栈的压入.弹出序列 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如,序列 {1,2,3,4,5} 是某 ...
- 基于Vue+Vuex+Vue-Router+axios+mint-ui的移动端电商项目
第一步:安装Node 1.打开NodeJS的官网,下载和自己系统相配的NodeJS的安装程序,包括32位还是64位一定要选择好,否则会出现安装问题. 下载地址:https://nodejs.org/e ...