<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: '保障上台能力的正常平稳运行' },将上台能力四个字变为红色
时间: 2023-10-11 16:09:40 浏览: 81
在这个代码中,可以通过使用 `formatter` 属性来自定义表格中的显示内容,从而实现将“上台能力”四个字变为红色的效果。
你可以使用以下的代码实现:
```html
<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="事项" :formatter="formatCycle"></el-table-column>
</el-table>
</el-container>
</template>
<script>
export default {
data() {
return {
tableData: [
{
index: '能力服务健康度',
ymatter: '能力保障团队',
cycle: '保障上台能力的正常平稳运行'
}
]
}
},
methods: {
formatCycle(row, column) {
// 自定义方法,用于格式化表格中“事项”一列的显示内容
const cycle = row[column.property]
const redText = '<span style="color: red;">上台能力</span>'
return cycle.replace('上台能力', redText)
}
}
}
</script>
```
这里使用了 `formatter` 属性来定义了一个方法 `formatCycle`,该方法返回一个格式化过的字符串,其中使用了 HTML 标签 `<span>` 来将“上台能力”四个字变为红色。
阅读全文