The vue component el-table string specifies the position to change the style, the string finds the braces and changes the color of the data specified in the braces.

Encountered a demand today, directly on the picture 

 

 It is required that the font color in the curly brackets of this form needs to be red

The first thing I thought of was to use innerHTML to add up, the code

            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>`

But there is a problem, the $refs.colorRef.innerHtml of the component cannot parse the html, and finally it is assigned in the form of a string, and finally the page displays <span>${b}</sapn><span style='color: red'>${c}</sapn> is directly displayed like this.

I tried it, if it is not used in the component, it is ok, but not in the component (if you know how to solve this step, you can discuss it)

Then change the way of thinking , v-html does not work, and the final rendering is also <span>${b}</sapn><span style='color:red'>${c}</sapn>, directly rendering the string, HTML is not parsed.

Coincidentally, when I was smoking again, inspiration came suddenly.

Now that I have written it like this, I can process the data directly. First, I deep copy the data, and then start to operate the deep copied data.

code:

    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;
      });
    },

and then re-render

        <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>

At this time, the page effect appears.

If you think there is a better idea or method, welcome to discuss.