二次封装的el-table组件 formatter 的属性失效

情景

el-table-column里面添加formatter 对值进行格式化，一直不生效，后来发现是template中插槽作用域导致的，也就是formatter作用于单个字段（即一个el-table-column）就是下面这种：

<el-table-column label="用户角色" width="120" :formatter="formatFunc">
        <template slot-scope="scope">
          <span>{{ scope.row.role.roleName }}</span>
        </template>
</el-table-column>

原因：formatter 和 scope template 不能同时存在

解决方案：使用slot，自定义 formatter

这样就可以

<el-table-column prop="roleName" label="用户角色" width="120" :formatter="formatFunc">
</el-table-column>

问题：

但是组件中如何处理？

       <!-- 处理render函数部分逻辑 -->
          <div v-else-if="item.render" slot-scope="{ row }">
            {{ item.render(row) }}
          </div>

页面传参

 {
            label: '状态',
            prop: 'status',
            render: (row) => {
              console.log('row',row)
              const data = this.table_status[row.status]
              return  data ? data.label :'--'
            }
          },

处理数据

  formatter(row) {
        if (row.prop == "file_size") {
          if (row.size < 1024) {
            return row + "B"
          } else if (row < 1024*1024) {
            return (Number(row) / 1024).toFixed(3) + "KB"
          } else if (row < 1024*1024*1024) {
            return (Number(row) / 1024 / 1024).toFixed(3) + "MB"
          } else {
            return (Number(row) / 1024 / 1024 / 1024).toFixed(3) + "GB"
          }
        }
      },

但是如果想根据不同的状态显示不一样的字体颜色呢？

  <!-- 处理render函数部分逻辑 -->
 <div v-else-if="item.render" slot-scope="{ row }"> <span v-html="item.render(row) "></span></div>

 // 通过重要程度设置相关样式
    formatter(content) {
      if(content == "重要") {
         return `<span style="color: rgb(37, 87, 150);"> ${content} </span> `
      } else if (content == "严重") {
        return `<span style="color: rgb(246, 23, 38);"> ${content} </span>`
      } else {
        return `<span> ${content} </span>`;
      }

页面上使用

 {
                        label: '状态',
                        prop: 'status',
                        render: (row) => {
                            const data = this.table_status[row.status]
                            return data ? `<span style="color: red"> ${data.label} </span> ` : '--'
                        },
                    },

好啦~

如果不是二次封装的组件 又要如何处理呢

  <el-table-column prop="status" label="状态" :formatter="statusFormatter"></el-table-column>、

        statusFormatter(row) {
            if (row.status == 0) {
                return `<span style="color:#67c23a">启用</span>`
            } else {
                return `<span style="color:#f78989">禁用</span>`
            }
        },

在 Vue 中，如果你想在模板中插入由 formatter 函数返回的 HTML 字符串，并希望这些 HTML 标签被浏览器解析为实际的 DOM 元素，你需要确保 Vue 能够识别并处理这些字符串作为原始 HTML。这通常通过使用 v-html 指令来完成。

但是，el-table-column 的 formatter 函数返回的字符串默认会被当做纯文本处理，并不会被解析为 HTML。为了解决这个问题，你可以考虑以下两种方法：

方法：使用 scoped slots 而不是 formatter

这是推荐的方法，因为它提供了更好的控制和安全性。使用 scoped slots，你可以直接在模板中编写 HTML，并应用样式。

<el-table :data="tableData">
  <el-table-column prop="status" label="状态">
    <template slot-scope="scope">
      <span :style="{ color: scope.row.status === 0 ? '#67c23a' : '#f78989' }">
        {{ scope.row.status === 0 ? '启用' : '禁用' }}
      </span>
    </template>
  </el-table-column>
  <!-- 其他列 -->
</el-table>

在这个例子中，我们使用了三元表达式来根据 status 的值动态设置颜色，并直接显示文本“启用”或“禁用”。