<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="cycles" label="事项"> <template slot-scope="scope"> <span v-html="getColor(scope.row.cycles)"></span> </template> </el-table-column> </el-table> </el-container>将事项的第三行内容变为红色
时间: 2023-07-19 15:46:45 浏览: 43
如果您想将事项表格中的第三行(即第三行数据)的内容变为红色,可以使用 `slot-scope` 中的数据 `row` 来获取当前行的数据,然后将第三个属性的值替换为带有红色样式的 span 标签。下面是一个示例代码:
```html
<el-table-column prop="cycles" label="事项">
<template slot-scope="scope">
<span v-html="replaceThirdWordWithRed(scope.row.cycles[2])"></span>
</template>
</el-table-column>
methods: {
replaceThirdWordWithRed(cycles) {
return cycles.replace(/(\S+\s+\S+\s+)(\S+)/, '$1<span style=\'color:red\'>$2</span>');
}
}
```
这里使用了一个新的方法 `replaceThirdWordWithRed`,将字符串中第三个单词替换为带有红色样式的 span 标签。注意,这里使用了正则表达式来匹配第三个单词,然后使用 `$1` 和 `$2` 来引用前两个单词和第三个单词,并将第三个单词替换为带有红色样式的 span 标签。如果您的数据中第三个属性的值不是一个单词,而是一个短语或句子,需要根据具体情况做出调整。
相关问题
<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: '保障上台能力的正常平稳运行' },将上台能力四个字变为红色
在这个代码中,可以通过使用 `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>` 来将“上台能力”四个字变为红色。
<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="cycles" label="事项" ></el-table-column> </el-table> </el-container>tableData: [{ index: '能力服务健康度', ymatter: '能力保障团队', cycles: '保障上台能力的正常平稳运行' },如何将的正常和运行设置为i红色
您可以使用 `formatter` 属性来自定义表格列的格式化函数,并在这个函数中将需要设置为红色的文本使用 HTML 标签包裹起来,比如 `<span>` 标签,并给这个标签添加 `style` 属性来设置颜色。
以下是实现将 "正常" 和 "运行" 设置为红色的代码:
```
<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="cycles" label="事项">
<template slot-scope="scope">
<span :style="{ color: scope.row.cycles.includes('正常') ? 'red' : 'black' }">{{ scope.row.cycles }}</span>
<span :style="{ color: scope.row.cycles.includes('运行') ? 'red' : 'black' }">{{ scope.row.cycles }}</span>
</template>
</el-table-column>
</el-table>
</el-container>
```
在这个代码中,我使用了 `scope.row.cycles.includes()` 方法来判断表格中的 "事项" 是否包含 "正常" 或 "运行",如果包含,则将对应的文本设置为红色。我还使用了 `:style` 绑定来动态设置文本颜色,如果包含需要设置为红色的关键词,则将颜色设置为红色,否则设置为黑色。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书商城-图书列表</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> 0">
{{bk.bookName}} ¥{{bk.bookPrice}} <iframe src="footer.html" frameborder="0" scrolling="no" width="100%" height="245px"></iframe> <script src="/BookShopSystem_war/layui/layui.js"></script>这是完整的html代码,请结合你给出的分页功能整合出完整的代码
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)