vue组件el-table字符串指定位置改变样式，字符串找到大括号并将大括号内的数据指定位置改变颜色。

今天遇到一个需求，直接上图 

 

 要求这个表格大括号里面需要字体颜色需要加红

一开始想到的是使用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。

好巧不巧，又是抽烟的时候，突然来了灵感。

既然我已经这样写了，那我直接处理一下数据得了，先是将数据深拷贝了出来，然后开始操作深拷贝的数据。

代码：

    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>

这时候页面效果就出现了。

如果大家觉得有更好的思路或者方法欢迎讨论。