【Vue】在el-table的el-table-column中，如何控制单行、单列、以及根据内容单独设置样式。例如：修改文字颜色、背景颜色

**Vue 中 el-table 的自定义样式**

在 Vue 中使用 `el-table` 组件时，我们经常需要对表格的内容进行自定义样式处理。例如，根据数据内容修改文字颜色、背景颜色等。在本文中，我们将介绍如何在 `el-table-column` 中控制单行、单列以及根据内容单独设置样式。

###1. 单行和单列样式首先，我们需要了解 `el-table-column` 的基本结构。每个列都是一个独立的组件，可以通过 `prop` 属性指定数据源中的字段名。

html<template>
 <el-table :data="tableData">
 <el-table-column prop="name" label="姓名"></el-table-column>
 <el-table-column prop="age" label="年龄"></el-table-column>
 </el-table>
</template>

<script>
export default {
 data() {
 return {
 tableData: [
 { name: 'John', age:18 },
 { name: 'Alice', age:22 }
 ]
 }
 }
}
</script>

在上面的例子中，我们定义了两个列：`name` 和 `age`。如果我们想要对每个列进行单独的样式设置，可以使用 `scoped-slot`。

html<template>
 <el-table :data="tableData">
 <el-table-column label="姓名" column-key="name">
 <template slot-scope="{ row }">
 <span style="color: red">{{ row.name }}</span>
 </template>
 </el-table-column>
 <el-table-column label="年龄" column-key="age">
 <template slot-scope="{ row }">
 <span style="background-color: yellow">{{ row.age }}</span>
 </template>
 </el-table-column>
 </el-table>
</template>

<script>
export default {
 data() {
 return {
 tableData: [
 { name: 'John', age:18 },
 { name: 'Alice', age:22 }
 ]
 }
 }
}
</script>

在上面的例子中，我们使用 `scoped-slot` 来对每个列进行单独的样式设置。我们通过 `slot-scope` 属性传递 `row` 对象给模板，之后可以使用 `row` 对象中的属性来设置样式。

###2. 根据内容单独设置样式如果我们想要根据数据内容单独设置样式，可以使用 `template` 元素和 `v-if` 指令。

html<template>
 <el-table :data="tableData">
 <el-table-column label="年龄" column-key="age">
 <template slot-scope="{ row }">
 <span v-if="row.age >=18" style="color: red">{{ row.age }}</span>
 <span v-else style="background-color: yellow">{{ row.age }}</span>
 </template>
 </el-table-column>
 </el-table>
</template>

<script>
export default {
 data() {
 return {
 tableData: [
 { name: 'John', age:18 },
 { name: 'Alice', age:22 }
 ]
 }
 }
}
</script>

在上面的例子中，我们使用 `v-if` 指令来根据数据内容单独设置样式。如果 `row.age` 大于或等于18，会显示红色字体；否则会显示黄色背景。

###3. 总结通过本文的介绍，我们可以在 Vue 中的 `el-table` 组件中控制单行、单列以及根据内容单独设置样式。我们可以使用 `scoped-slot` 来对每个列进行单独的样式设置，或者使用 `template` 元素和 `v-if` 指令来根据数据内容单独设置样式。

###4. 参考* [Vue.js]( />* [Element UI]( />* [scoped-slot](