功能需求:el-table中有一个字段,想根据不同类型改变不同颜色。下面是代码介绍!
1、用:class判断
<el-table-column prop="type" label="类型">
<template slot-scope="scope">
<span
:class="
scope.row.type == 1
? 'red'
: scope.row.type == 2
? 'purple'
: scope.row.type == 3
? 'darkOrange'
: scope.row.type == 4
? 'color1'
: scope.row.type == 5
? 'color2'
: ''">
{{ typeChange.emergencyChange(scope.row.type) }}</span>
</template>
</el-table-column>
2、调用方法
//template
<el-table :data="tableList" :cell-class-name="colorChange">
<el-table-column prop="type" label="类型"></el-table-column>
<el-table>
//script
methods:{
//第一种方法
colorChange({ row }) {
if (row.type == 1) {
return "font-color1";
}else if (row.type == 2) {
return "font-color2";
}else if (row.type == 3) {
return "font-color3";
}
},
第二种方法
colorChange({ row, column, rowIndex, columnIndex }) {
if (row.type === 1 && columnIndex === 11) {
return "red";
} else if (row.tyoe === 2 && columnIndex === 11) {
return "purple";
} else if (row.type === 3 && columnIndex === 11) {
return "darkOrange";
}
}
},
aicolors:一款快速生成与之匹配的配色方案的AI配色工具
el-table利用:row-style="rowClass"设置指定行变色
el-table表格显示selection多选时对某些复选框设置禁止选中
el-table表格实现多选功能(全选/指定选中/取消选中)
上面是“el-table根据不同类型设置不同td颜色方法”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_2183.html
workflows工作流
一个迷人而丰满的女巫和一只黑猫骑着飞天扫帚
一个穿过泥泞雷区的士兵ComfyUI工作流
一只由水晶制成的蜂鸟
一只可爱的雪豹在雪地里散步ComfyUI工作流
坐落在白雪覆盖的广阔平原上2只可爱的雪豹
一只穿着黑色蝴蝶结西装可爱橙色小猫
一张由表情符号组成的照片ComfyUI工作流
一只在森林里漫步的麋鹿ComfyUI工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

数字滚动效果(兼容IE6/IE8)
利用js做一个炫酷音乐背景效果
canvas空间文本射线
利用CSS3做一个星级评分样式
纯css制作卡通头像(随鼠标转头)
js+css3做一个灯泡开灯关灯效果
css3动画loading效果
3D立体人物效果










