Element UI Element Plus之改变表格单元格颜色

首先官网文档中有 Table 表格组件的属性说明，只需要在el-table标签中加上:cell-style="xxx"，以及实现该方法即可。Element UI框架和Element Plus框架在使用上有一点点区别，因此记录一下下。

Element UI：Element - The world's most popular Vue UI framework

Element Plus：一个 Vue 3 UI 框架 | Element Plus

1、Element UI框架的示例

<el-tablebordersize="mini"row-key="id"highlight-current-row:data="feats.list":cell-style="handleChangeCellStyle"
><el-table-column label="评分" width="100" align="center"><template slot-scope="scope"><el-link type="danger">{{ scope.row.score }}</el-link></template></el-table-column>
</el-table>methods: {/*** 改变表格单元格颜色*/handleChangeCellStyle({row, column, rowIndex, columnIndex}) {let cellStyleif (row.score > 9) {cellStyle = 'background-color: #ffdcdc'}else if (row.score > 7) {cellStyle = 'background-color: #fde2c2'}else {cellStyle = 'background-color: #fff'}if(column.label === '评分') {return cellStyle}},
}

2、Element Plus框架的示例

<el-tablebordersize="small"row-key="id"highlight-current-row:data="feats.list":cell-style="handleChangeCellStyle"
><el-table-column label="评分" width="100" align="center"><template slot-scope="scope"><el-link type="danger">{{ scope.row.score }}</el-link></template></el-table-column>
</el-table>methods: {/*** 改变表格单元格颜色*/handleChangeCellStyle({row, column, rowIndex, columnIndex}) {let cellStyle = {}if (row.score > 9) {cellStyle.backgroundColor = '#ffdcdc'}else if (row.score > 7) {cellStyle.backgroundColor = '#fde2c2'}else {cellStyle.backgroundColor = '#fff'}if(column.label === '评分') {return cellStyle}},
}

3、效果如下~

Element UI Element Plus之改变表格单元格颜色相关推荐

改变表格单元格的背景颜色
功能 : 改变表格单元格的背景颜色作者 : zjly 修改时间 : 2007-04-11 电子邮件 : zjly4@163.com 参数 id ...
element ui中table合并相同内容单元格
一.遍历需要合并的集合,定义spanArr数组二.在table中增加事件三.调用objectSpanMethod方法,合并单元格
html css 表格自动高度,HTML/CSS - 具有固定高度的容器中表格单元格的高度不一致...
我有一个使用HTML/CSS设置的表格,它位于正在变成手风琴的UL的LI元素中.问题是,当LI元素动画到特定高度时,它会改变表格单元格的高度,使最后一个元素隐藏起来.HTML/CSS - 具有固定高度 ...
java td背景色_jQuery：无法更改表格单元格的背景颜色
我花了太多时间解决这个简单的问题,而不是我应该 . 因此,我想看看这个,因为我不明白为什么它不起作用 . 我习惯用jQuery更改CSS属性,但在这种特殊情况下它不起作用 . 所以这是我的功能,应该改 ...
html中如何定义斜框,html表格单元格添加斜下框线的方法
一.分隔单元格的方法 1.用"transform: rotate(-55deg);"把一条水平线旋转一定角度就成斜线了 2.利用以下命令调整分割线位置等. :after :befo ...
poi设置word表格单元格宽度_xwpftable设置宽度；POI操作Word设置表格宽度
poi 操作word里表格,如设置表格宽度.行高.表格样式等. 1.表格或单元格宽度: 默认TblW的type属性为STTblWidth.AUTO,即自动伸缩.所以要调整为指定类型:STTblWidt ...
element etable表格改变某个单元格的背景颜色
// 改变某一列单元格背景颜色tableCellStyle({ row, column, rowIndex, columnIndex }) {console.log(row); // 基本都在这里面 ...
element ui 树形-懒加载-表格-多选勾选问题
element ui树形表格如下: 它的数据格式为:使用children字段来存放子级数据 tableData: [{id: 1,date: "2016-05-02",name: ...
layui table设置表格单元格换行，固定列高度改变
layui table设置表格单元格换行 css /** 控制表格单元格换行 **/ .layui-table-cell {height: auto;word-break: normal;displa ...

Element UI Element Plus之改变表格单元格颜色

Element UI Element Plus之改变表格单元格颜色相关推荐

最新文章

热门文章