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>

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值