前言

   vue中 element框架,其中表格组件,我既要行内数据格式化,又要插入html标签

   一贯思维,二者不可兼得也

一、element 表格 数据格式化

  

  demo

<el-table-column :prop="item.key"  v-for="item in levelName" :label="item.name" :formatter='handleSign'>
</el-table-column>

  再写 handleSign () 方法

//处理签到
handleSign(row,cellValue){
let signInId = ''
if(this.deviceSignList){
this.deviceSignList.map((item,index)=>{
if(item.signInId == row.signInId){
signInId = "签到"
}else{
signInId = "未签到"
}
})
}
return signInId
},

  

  目的:根据不能的值,相对应处理。一般状态会用的比较多,后台返回来的1,2,3,4 用户是不明白的

  运行结果

  

二、element 表格内容自定义模板

  

  demo

<el-table-column
label="姓名"
width="180">
<template slot-scope="scope">
<span v-html="scope.row.vdmSubjectVo.content"></span>
<el-popover trigger="hover" placement="top">
<p >姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>

  

  目的,表格内要显示html标签,就要用到template 语法,要是返回的数据中有html标签(比如 字符串中拼接了 <span ></span>)就要用到 v-html

  运行结果

  

 三、二者结合

   你以为可以这样写

   

<el-table-column
label="姓名"
:formatter='handleSign'

width="180">
<template slot-scope="scope">
<span v-html="scope.row.vdmSubjectVo.content"></span>
<el-popover trigger="hover" placement="top">
<p >姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>

  但是你不可以,因为scope.row.vdmSubjectVo.content 读取的是表格源数据,而不是你格式化后的数据

  解决方法

  你只能先把表格数据格式化后,在用 template + v-html 展示出来

  demo

  

<el-table-column align="center" header-align="center" prop="vdmSubjectVo.content" label="内容">
<template slot-scope="scope">
<span v-html="scope.row.vdmSubjectVo.content">
</span>
</template>
</el-table-column>
————————————华丽分割线—————————— 
formatterContent() 在你请求后端数据的成功回调中调用,数组循环调用哦,因为每一行都要格式化呀
 数据格式化(格式源数据)

formatterContent(cellValue){
      let content = JSON.parse(cellValue.vdmSubjectVo.content)
let option = ''
if(content){
content.map((item,index) =>{
if(item.rightAnswer){
option = '<span style="color:red;display:inline-block">'+option + item.index + " : "+ item.content+'</span><br/>'
}else{
option = option + item.index + " : "+ item.content +"<br/>"
}
})
}
let options ="内容:"+cellValue.vdmSubjectVo.subjectName +"<br/>"+option
return options
},

  

  目的:实现了数据格式化以及插入了html标签

  运行效果是这样的:

  

 Fannie式总结

  这个算是工作上实际遇到的问题,问题很小。也许短路一下,就没转过这个弯弯

  

vue+element 表格formatter数据格式化并且插入html标签的更多相关文章

  1. vue+Element 表格中的树形数据

    template部分   只在树形的结构中显示编辑与删除按钮 这里我只是简单的做了一个 v-if 判断在操作列中 ,判断是否存在级别这个字段 <div> <el-table :dat ...

  2. vue formatter element表格处理数据

    formatter 指定一个vue methods 方法 作用:对从数据库中取出的数据进行处理后展示. <el-table-column prop="partner1" // ...

  3. vue,element列表大数据卡顿问题,vue列表渲染慢,element表格渲染慢,表格渲染慢(卡),表格全选卡

    https://github.com/livelyPeng/pl-table 一个表格组件(完美解决万级数据渲染卡顿问题),流畅渲染万级数据并不会影响到el-table的原有功能 分析: 前端UI框架 ...

  4. vue element 导出 分页数据的excel表格

    1.安装相关依赖 npm install --save xlsx file-saver 2.导入相关插件 在组建头部导入相关插件 const FileSaver = require("fil ...

  5. vue+element 表格筛选

      筛选是element 组件 自己有的东西,按照文档撸 是没有问题 这里存在一个情况是,如果 筛选 的数据没有 那么整个表格为空白,产品要加提示 例如:暂无筛选的数据 解决方案:通过 ref 获取整 ...

  6. vue,element列表大数据卡顿问题,vue列表渲染慢

    https://github.com/livelyPeng... 一个表格组件(完美解决万级数据渲染卡顿问题),流畅渲染万级数据并不会影响到el-table的原有功能 分析: 前端UI框架使用的是El ...

  7. vue+element 表格导出Excel文件

    https://www.cnblogs.com/bobodeboke/p/8867481.html  非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...

  8. vue+element 表格按需合并

    这个功能难度感觉一般般吧,记录一下,以后碰到了直接来复制,懒得再写了 效果如下: 前6列是合并,后面的有几行,动态显示几行 重点是在数据处理上面做文章,合并列大家都会,数据处理呢?这样来处理, 我们拿 ...

  9. vue中表格el-table-column数据翻译字段

    <el-table-column prop="isstate" label="状态"></el-table-column> 以上是显示后 ...

随机推荐

  1. vue 自定义image组件

    介绍 1:当图片加载失败时,给出错误提示. 2:当图片加载中时,给出加载提示. 3:图片处理模式:等比缩放/裁剪/填充/... 1.图片加载状态处理 通过给图片绑定load事件与error事件处理函数 ...

  2. Mock测试框架(Mockito为例)

    在做单元测试的时候,有的时候用到的一些类,我们构造起来不是那么容易,比如HttpRequest,或者说某个Service依赖到了某个Dao,想构造service还得先构造dao,这些外部对象构造起来比 ...

  3. mysql的左连接问题

    之前写过一个mysql语句,功能是将一个表ds的一个字段值同步更新到另一个表bk的字段,不过不是全部,只更新表bk中有的数据,如果表bk中有而表ds中没有,表B对应的这个字段值就为空 UPDATE b ...

  4. MySQL Replication--双主结构优缺点

    双主架构图 双主架构实现原理当从库IO线程接受到主库传递来的二进制日志(Binlog)并将之保存为从库的中继日志(relay log),然后从库SQL线程将中继日志(relay log)的事件重做到从 ...

  5. pandas数据处理

    首先,数据加载 pandas提供了一些用于将表格型数据读取为DataFrame对象的函数,期中read_csv和read_table这两个使用最多. 1.删除重复元素 使用duplicated()函数 ...

  6. Flink原理(七)——动态表(Dynamic tables)

    前言 本文是结合Flink官网,个人理解所得,若是有误欢迎留言指出,谢谢!文中图皆来自官网(链接[1]). 本文将随着下面这个问题展开,针对该问题更为生动的解释可以参见金竹老师的分享(链接[2]). ...

  7. Python_列表操作1

    1.列表相关操作:声明,添加,删除,修改,获取len colors=['红','橙','黄','绿'] #声明一个列表 def colors_getall(): #获取列表中所有元素 return c ...

  8. istio-1.1.6镜像列表

    istio-1.1.6镜像列表 istio-1.1.6/install/kubernetes/istio-demo.yaml文件里提取出来的镜像,方便作harbor部署. ============== ...

  9. 《基于 Java EE 的高校重修管理系统设计与实现》论文笔记(九)

    标题:基于 Java EE 的高校重修管理系统设计与实现 一.基本信息 时间:2015 来源:河海大学文天学院 关键词::Java EE 架构: B/S 模式: 重修管理系统 二.研究内容 1.需求分 ...

  10. vscode beautiful配置

    在工作目录下建立.jsbeautifyrc文件 官方文档 { "brace_style": "none,preserve-inline", "inde ...