vue+elementui 在<tr>中设置字体居中，字号，字体颜色

在 Vue + Element UI 中，要在 `<tr>` 元素中设置单元格的内容样式，比如字体居中、字号和颜色，你可以通过自定义元素模板 (template) 并直接操作 DOM 来实现。不过，通常建议将样式放在 CSS 类中，以便复用和维护。下面是一个示例：

首先，假设你有一个名为 `TableRow` 的 Vue 模板组件，你可以在 CSS 中定义样式：

.table-row {
  font-family: Arial, sans-serif; /* 字体 */
  font-size: 14px; /* 字号 */
  color: #333; /* 字体颜色 */
}

.center-text {
  text-align: center; /* 文本居中 */
}

然后在模板中使用这些样式：

<template>
  <tr class="table-row">
    <td v-for="(item, index) in items" :key="index" :class="{ centerText: shouldCenter(index) }">{{ item }}</td>
  </tr>
</template>

<script>
export default {
  props: {
    items: { array: String }, // 父组件传入的单元格数据
  },
  methods: {
    shouldCenter(index) {
      // 根据索引判断是否需要居中，这里假设每奇数行需要居中
      return index % 2 === 0;
    }
  }
};
</script>

在父组件中使用 `TableRow` 组件，并传递数据：

<template>
  <el-table>
    <el-table-column prop="columnHeader" ...></el-table-column>
    <el-table-body>
      <TableRow v-for="(row, rowIndex) in rows" :items="rowItems[rowIndex]"></TableRow>
    </el-table-body>
  </el-table>
</template>

<script>
import TableRow from './TableRow.vue';

// 假设 rows 和 rowItems 是你的实际数据
export default {
  components: { TableRow },
  data() {
    return {
      rows: ...,
      rowItems: ...,
    };
  }
};
</script>

现在，`center-text` 类会应用于每行需要居中的单元格。