<el-table-column 设置满足条件字体颜色
时间: 2023-11-08 22:05:51 浏览: 32
您可以使用 scoped slot 的方式来自定义单元格的渲染,然后在渲染时根据条件设置对应的样式。具体实现可以参考以下代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名">
<template slot-scope="{ row }">
<span :style="{ color: row.age > 18 ? 'red' : 'green' }">{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 16 },
{ name: '王五', age: 25 }
]
}
}
}
</script>
```
在上述代码中,我们使用了 `slot-scope` 来获取当前行的数据,然后根据 `age` 字段的值来设置字体颜色。
相关问题
<template> <el-container style="height: 100%"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="index" label="考核指标" :header-cell-style="{backgroundColor: '#ff0000'}" width="110"></el-table-column> <el-table-column prop="ymatter" label="具体事项(原)" :header-cell-style="{backgroundColor: '#00ff00'}"></el-table-column> <el-table-column label="具体事项(新)" prop="xmatter"> <el-table-column prop="point" label="考核要点"></el-table-column> <el-table-column prop="method" label="计分方法"></el-table-column> <el-table-column prop="target" label="考核目标" width="200"></el-table-column> </el-table-column> <el-table-column prop="cycle" label="考核周期" :header-cell-style="{backgroundColor: '#0000ff'}" width="50"></el-table-column> </el-table> </el-container> </template>给这个表格美化的显眼点
你可以尝试在表头中添加图标或者字体图标,让它更加显眼。例如,可以在考核指标列的表头单元格中添加一个 `el-icon-warning-outline` 的图标,表示这一列是比较重要的内容;在考核周期列的表头单元格中添加一个 `el-icon-date` 的图标,表示这一列是和日期相关的内容。同时,你也可以尝试添加一些过渡效果,比如当鼠标悬停在单元格上时,让单元格的背景色变化,增加一些交互效果。下面是一个例子:
```
<template>
<el-container style="height: 100%">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="index" label="考核指标" :header-cell-style="{backgroundColor: '#ff0000'}" width="110">
<template slot="header">
<i class="el-icon-warning-outline"></i>
考核指标
</template>
</el-table-column>
<el-table-column prop="ymatter" label="具体事项(原)" :header-cell-style="{backgroundColor: '#00ff00'}"></el-table-column>
<el-table-column label="具体事项(新)" prop="xmatter">
<el-table-column prop="point" label="考核要点"></el-table-column>
<el-table-column prop="method" label="计分方法"></el-table-column>
<el-table-column prop="target" label="考核目标" width="200"></el-table-column>
</el-table-column>
<el-table-column prop="cycle" label="考核周期" :header-cell-style="{backgroundColor: '#0000ff'}" width="50">
<template slot="header">
<i class="el-icon-date"></i>
考核周期
</template>
</el-table-column>
</el-table>
</el-container>
</template>
<style>
.el-table__row:hover {
background-color: #f5f5f5;
}
</style>
```
这个例子中,我们在考核指标列和考核周期列的表头中分别添加了一个图标和文字,让它们更加显眼。同时,在 CSS 中定义了当鼠标悬停在单元格上时,单元格的背景色变成浅灰色,增加了一些过渡效果。你可以根据需要修改图标和颜色等样式,或添加其他交互效果。
<template> <el-container style="height: 100%"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="index" label="考核指标" width="150"></el-table-column> <el-table-column prop="ymatter" label="负责人" width="120"></el-table-column> <el-table-column prop="cycle" label="事项" ></el-table-column> </el-table> </el-container> </template>tableData: [{ index: '能力服务健康度', ymatter: '能力保障团队', cycle: '保障上台能力的正常平稳运行' },将上台能力四个字变为红色
您可以在 `el-table-column` 标签里添加 `scoped-slot` 来改变列中的内容,具体来说,您可以添加一个 `template` 标签,然后在里面使用 `span` 标签来包裹需要变为红色的文字,并添加 `style` 属性来设置文字颜色为红色。示例如下:
```
<template>
<el-container style="height: 100%">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="index" label="考核指标" width="150"></el-table-column>
<el-table-column prop="ymatter" label="负责人" width="120"></el-table-column>
<el-table-column prop="cycle" label="事项">
<template slot-scope="scope">
<span :style="{ color: 'red' }">{{ scope.row.cycle.replace('上台能力', '<span style=\'color: red;\'>上台能力</span>') }}</span>
</template>
</el-table-column>
</el-table>
</el-container>
</template>
```
在上面的示例中,我们使用了 `replace` 函数来将原来的字符串中的 `上台能力` 替换成带有红色字体的字符串。注意,我们在 `replace` 函数中使用了 HTML 标签 `span` 来包裹需要变为红色的文字,并设置了 `style` 属性来设置文字颜色为红色。最后,我们将替换后的字符串插入到 `span` 标签中,并使用 `v-bind` 指令将 `style` 属性绑定到 `span` 标签上,以实现文字变为红色的效果。