vue+element 表格formatter数据格式化并且插入html标签

Easter79
• 阅读 484

前言

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

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

一、element 表格 数据格式化

  vue+element 表格formatter数据格式化并且插入html标签

  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 用户是不明白的

  运行结果

  vue+element 表格formatter数据格式化并且插入html标签

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

  vue+element 表格formatter数据格式化并且插入html标签

  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标签(比如 字符串中拼接了 )就要用到 v-html

运行结果

  vue+element 表格formatter数据格式化并且插入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标签

运行效果是这样的:

  vue+element 表格formatter数据格式化并且插入html标签

Fannie式总结

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

原文出处:https://www.cnblogs.com/ifannie/p/11347202.html

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
1个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。 language JavaScript "name": "vuecliversion2", "version": "1.0.0", "desc
光头强的博客 光头强的博客
1个月前
Java面向对象试题
1、 请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。 创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现 接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿 吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
1个月前
css问题
1、 在IOS中图片不显示(给图片加了圆角或者img没有父级) <div<img src""/</div div {width: 20px; height: 20px; borderradius: 20px; overflow: h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录 问题 用navicat导入数据时,报错: 原因这是因为当前的MySQL不支持datetime为0的情况。 解决修改sql\mode: sql\mode:SQL Mode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。 全局s
小森森 小森森
1个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本 欢迎添加左边的微信一起探讨!项目地址:](https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n) \2. Bug修复更新日历 2. 情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意), \ \ 和 注意
晴空闲云 晴空闲云
1个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。 盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
1个月前
快速入门|使用MemFire Cloud构建React Native应用程序
> MemFire Cloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Stella981 Stella981
1年前
Django之Django模板
1、问:html页面从数据库中读出DateTimeField字段时,显示的时间格式和数据库中存放的格式不一致,比如数据库字段内容为2012-08-26 16:00:00, 但是页面显示的却是Aug. 26, 2012, 4 p.m. 答:为了页面和数据库中显示一致,需要在页面格式化时间,需要添加<td>{{ dayrecord.p\_time|date:
helloworld_34035044 helloworld_34035044
4个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。 uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid() 或 uuid(sep)参数说明:sep 布尔值,生成的uuid中是否包含分隔符'',缺省为
helloworld_28799839 helloworld_28799839
1个月前
常用知识整理
# Javascript ## 判断对象是否为空 ```js Object.keys(myObject).length === 0 ``` ## 经常使用的三元运算 > 我们经常遇到处理表格列状态字段如 `status` 的时候可以用到 ``` vue