La cadena el-table del componente vue especifica la posición para cambiar el estilo, la cadena encuentra las llaves y cambia el color de los datos especificados en las llaves.

Encontré una demanda hoy, directamente en la imagen. 

 

 Se requiere que el color de fuente en los corchetes de este formulario sea rojo

Lo primero que pensé fue usar innerHTML para sumar, el código

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

Pero hay un problema: el $refs.colorRef.innerHtml del componente no puede analizar el html, y finalmente se asigna en forma de cadena, y finalmente la página muestra <span>${b}</sapn>< span style='color: red'>${c}</sapn> se muestra directamente así.

Lo probé, si no se usa en el componente, está bien, pero no en el componente (si sabes cómo resolver este paso, puedes discutirlo)

Luego cambie la forma de pensar , v-html no funciona, y la representación final también es <span>${b}</sapn><span style='color:red'>${c}</sapn>, representando directamente la cadena, HTML no se analiza.

Coincidentemente, cuando estaba fumando de nuevo, la inspiración vino de repente.

Ahora que lo he escrito así, puedo procesar los datos directamente. Primero, copio en profundidad los datos y luego empiezo a operar los datos copiados en profundidad.

código:

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

y luego volver a renderizar

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

En este momento, aparece el efecto de página.

Si cree que hay una mejor idea o método, bienvenido a discutir.