在我的项目中使用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. 微信小程序学习笔记一 小程序介绍 & 前置知识

    微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...

  2. linux上传下载文件(转载https://www.jb51.net/article/143112.htm)

    转载于:https://www.jb51.net/article/143112.htmLinux下目录复制:本机->远程服务器 1 scp -r /home/shaoxiaohu/test1 z ...

  3. 如何攻击Java Web应用

    越来越多的企业采用Java语言构建企业Web应用程序,基于Java主流的框架和技术及可能存在的风险,成为被关注的重点. 本文从黑盒渗透的角度,总结下Java Web应用所知道的一些可能被利用的入侵点. ...

  4. linux centos7 控制台下的一些操作

    2021-08-20一. 快捷键1. Ctrl+d       退出当前用户2. Ctrl+Insert  复制3. Shift+Insert 粘贴4. Ctrl+l       清屏二. 基础命令1 ...

  5. Linux定时任务(详细)

    Linux定时任务一.首先查看是否安装了crontab[root@master ~]# rpm -qa |grep crontabcrontabs-1.11-6.20121102git.el7.noa ...

  6. JAVA 之 每日一记 之 算法( 给你一个Excel表列序号,返回出它对应的数字 )

    代码结果:(只想要代码的可以离开了,代码给你了,绝对能用的.想要思路的往下看.) class Solution { public int titleToNumber(String s) { int a ...

  7. windows/linux 页面编码区别导致 python 乱码

    http://blog.csdn.net/haiross/article/details/36189103 可以先看下这篇文章..写的比较用心和详细并且高深..我只是记流水账的. 直到今天我才注意到 ...

  8. C# 爬虫框架实现 流程_爬虫结构/原理

    目录链接:C# 爬虫框架实现 概述 首先需要讲的是,爬虫的原理.其实在我看来,爬虫只是用来解决以下四个问题的工具: 提取哪些网页 提取网页上的哪些内容 存储到哪里(推荐数据库/开源类/Console) ...

  9. vue 路由视图,router-view嵌套跳转

    实现功能:制作一个登录页面,跳转到首页,首页包含菜单栏.顶部导航栏.主体,标准的后台网页格式.菜单栏点击不同菜单控制主体展示不同的组件(不同的页面). 配置router-view嵌套跳转需要准备两个主 ...

  10. Toast控件

    ------------恢复内容开始------------ 四种常见的App弹窗设计:Toast.Dialog.Actionbar 和 Snackbar 弹窗又称为对话框,是App与用户进行交互的常 ...