今天遇到一个需求，直接上图
要求这个表格大括号里面需要字体颜色需要加红
一开始想到的是使用innerHTML往上加，代码
var a = rowNew[index].commodityName.indexOf("("); // 拿到（ 在第几个字符
const b = rowNew[index].commodityName.substring(a); // 返回截取出来的字符串
const c = rowNew[index].commodityName.replace(colorObj.b, " "); // 字符串删除的部分
return this.$refs.colorRef.innerHtml = `<span>${b}</sapn><span style='color:red'>${c}</sapn>`但是有个问题，组件的$refs.colorRef.innerHtml 解析不了html,最后还是以字符串的形式赋值上去的，最后页面就显示 <span>${b}</sapn><span style='color:red'>${c}</sapn> 直接这样显示出来了。
我试了一下如果不是在组件内使用的话是可以的 在组件内就不行（这一步有知道怎么解决的可以讨论一下）
然后转换思路， v-html 这个也不行，最后渲染出来也是<span>${b}</sapn><span style='color:red'>${c}</sapn>，直接渲染字符串，没解析html。
好巧不巧，又是抽烟的时候，突然来了灵感。
既然我已经这样写了，那我直接处理一下数据得了，先是将数据深拷贝了出来，然后开始操作深拷贝的数据。
代码：
扫描二维码关注公众号，回复：
16002723 查看本文章
getList() {
this.loading = true;
listLog(this.queryParams).then((response) => {
this.colorArr = [];
const rowNew = JSON.parse(JSON.stringify(response.rows)); // 深拷贝了一份，处理深拷贝的数据
for (let index = 0; index < rowNew.length; index++) {
// 遍历每一项
if (rowNew[index].commodityName.indexOf("(") != -1) {
var colorObj = {};
var a = rowNew[index].commodityName.indexOf("("); // 拿到（ 在第几个字符
colorObj.b = rowNew[index].commodityName.substring(a); // 返回截取出来的字符串
colorObj.c = rowNew[index].commodityName.replace(colorObj.b, " "); // 字符串删除的部分
rowNew[index].commodityName = colorObj; // 把这一项改成数组
} else {
var colorObj1 = {};
colorObj1.c = rowNew[index].commodityName;
rowNew[index].commodityName = colorObj1;
}
}
this.logListNew = rowNew; // table的data
this.total = response.total;
this.loading = false;
});
},然后再重新渲染
<el-table-column
v-if="colData[2].istrue"
label="商品名称"
align="center"
prop="commodityName"
fixed
width="200"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<span>{
{ scope.row.commodityName.c }}</span>
<span style="color: red">{
{
scope.row.commodityName.b ? scope.row.commodityName.b : ""
}}</span>
</template>
</el-table-column>这时候页面效果就出现了。
如果大家觉得有更好的思路或者方法欢迎讨论。