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

前言

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

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

一、element 表格 数据格式化

　　demo

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

　 再写 handleSign () 方法

1//处理签到
2    handleSign(row,cellValue){
3      let signInId = ''
4      if(this.deviceSignList){
5          this.deviceSignList.map((item,index)=>{
6            if(item.signInId == row.signInId){
7              signInId = "签到"
8            }else{
9              signInId = "未签到"
10            }
11          })
12        }
13        return signInId
14    },

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

　　运行结果

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

　　demo

1<el-table-column
2      label="姓名"
3      width="180">
4      <template slot-scope="scope">
5        <span v-html="scope.row.vdmSubjectVo.content"></span>
6        <el-popover trigger="hover" placement="top">
7          <p >姓名: {{ scope.row.name }}</p>
8          <p>住址: {{ scope.row.address }}</p>
9          <div slot="reference" class="name-wrapper">
10            <el-tag size="medium">{{ scope.row.name }}</el-tag>
11          </div>
12        </el-popover>
13      </template>
14    </el-table-column>

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

运行结果

　三、二者结合

　　　你以为可以这样写

1<el-table-column
2      label="姓名"
3      :formatter='handleSign'
4      width="180">
5      <template slot-scope="scope">
6        <span v-html="scope.row.vdmSubjectVo.content"></span>
7        <el-popover trigger="hover" placement="top">
8          <p >姓名: {{ scope.row.name }}</p>
9          <p>住址: {{ scope.row.address }}</p>
10          <div slot="reference" class="name-wrapper">
11            <el-tag size="medium">{{ scope.row.name }}</el-tag>
12          </div>
13        </el-popover>
14      </template>
15    </el-table-column>

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

解决方法

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

demo

1<el-table-column align="center" header-align="center" prop="vdmSubjectVo.content" label="内容">
2                <template slot-scope="scope">
3                  <span v-html="scope.row.vdmSubjectVo.content">        
4                   </span>
5                </template>
6</el-table-column> 
7
8
9————————————华丽分割线—————————— 
10
11formatterContent（） 在你请求后端数据的成功回调中调用，数组循环调用哦，因为每一行都要格式化呀
12
13 数据格式化（格式源数据）formatterContent(cellValue){
14
15      let content = JSON.parse(cellValue.vdmSubjectVo.content)
16      let option = ''
17      if(content){
18        content.map((item,index) =>{
19          if(item.rightAnswer){
20            option = '<span style="color:red;display:inline-block">'+option + item.index + " : "+ item.content+'</span><br/>'
21          }else{
22            option = option + item.index + " : "+ item.content +"<br/>"
23          }
24        })
25      }
26      let options ="内容："+cellValue.vdmSubjectVo.subjectName +"<br/>"+option
27      return options
28    },

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

运行效果是这样的：

Fannie式总结

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

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