如何做网站购物车,广东建网站的公司,如何做原创小说网站,中小企业网站建设济南兴田德润电话一、 设置行背景颜色
1. 需求描述
后端返回表格数据#xff0c;有特定行数需要用颜色标识。类似于以下需求#xff1a;
2. 解决方式
方式区别:row-class-name“tableRowClassName”已返回类名的形式设置样式#xff0c;代码整洁#xff0c;但是会鼠标高亮#xff0c…一、 设置行背景颜色
1. 需求描述
后端返回表格数据有特定行数需要用颜色标识。类似于以下需求
2. 解决方式
方式区别:row-class-name“tableRowClassName”已返回类名的形式设置样式代码整洁但是会鼠标高亮导致背景颜色失效:cell-style“cellStyle”以返回样式的形式设置无鼠标高亮问题
2.1 表格代码
el-table:datatableDatastylewidth: 100%classtableStyle:row-class-nametableRowClassName:cell-stylecellStyleel-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column2.2 :row-class-name“tableRowClassName” 方式
/*** description: 合计行处理 :row-class-nametableRowClassName 方式* param {*}row, rowIndex* return {*}*/tableRowClassName({row, rowIndex}) {if (rowIndex 1) {return warning-row;} else if (rowIndex 3) {return success-row;}return ;}2.3 :cell-stylecellStyle方式
/*** description: 合计行处理 :cell-stylecellStyle方式* param {*}row, rowIndex* return {*}*/cellStyle({ row, rowIndex }) {if (rowIndex 1) {return background: #4D939F !important;color: #fff;} else if (rowIndex 3) {return background: #e6a23c !important;color: #fff;}return ;}3. 样式设置
3.1 row-class-name方式的样式
style langscss scoped
/deep/ .el-table .warning-row td {background: #4D939F !important;color: #fff;
}/deep/ .el-table .fixedRow td {background: #4D939F !important;color: #fff;position: sticky;bottom: 0;width: 100%;
}
style4. 表头设置颜色 4.1 第一种直接设置
style
.el-table th.red {background-color: #FBBFBC;color: #fff;
}.el-table th.green {background-color: #FEDDB6;color: #fff;
}
/style4.2 第二种 设置类名 避免样式污染 推荐第二种 注意是.tableStyle.el-table 不是.tableStyle .el-table
style
.tableStyle.el-table th.red {background-color: #FBBFBC;color: #fff;
}.tableStyle.el-table th.green {background-color: #FEDDB6;color: #fff;
}
/style
