elementui动态表格怎么设置不同内容的颜色

您可以使用 ElementUI 表格的 slot-scope 和 formatter 属性来实现不同内容的颜色设置。

首先，在表格组件中，您需要使用 slot-scope 属性来定义一个作用域插槽，然后在作用域插槽的模板中定义您需要的样式。

例如，您可以使用以下代码来定义一个作用域插槽，并在模板中根据数据的不同值设置不同的颜色样式：

<el-table-column prop="status" label="状态">
  <template slot-scope="scope">
    <span :class="scope.row.status === '已完成' ? 'status-finished' : 'status-unfinished'">
      {{ scope.row.status }}
    </span>
  </template>
</el-table-column>

在上面的代码中，我们使用了 prop 属性来指定渲染该列的数据源，然后使用 slot-scope 属性来定义一个作用域插槽，将数据源作为插槽的参数传递给模板。在模板中，我们使用了 :class 属性来根据数据的不同值设置不同的 CSS 类名，从而实现不同的颜色样式。

另外，您也可以使用 formatter 属性来自定义单元格的显示内容和样式。例如，您可以使用以下代码来定义一个 formatter 函数，并在函数中根据数据的不同值设置不同的颜色样式：

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

methods: {
  formatStatus(row, column, cellValue) {
    if (cellValue === '已完成') {
      return '<span class="status-finished">' + cellValue + '</span>';
    } else {
      return '<span class="status-unfinished">' + cellValue + '</span>';
    }
  }
}

在上面的代码中，我们使用了 formatter 属性来指定一个 formatStatus 函数作为该列的内容渲染函数，并在函数中根据数据的不同值设置不同的颜色样式。注意，由于 formatter 函数中返回的是 HTML 字符串，因此需要使用 v-html 指令来将其正确渲染。