<el-table-column prop="count"label=""/> </el-table> 添加样式 .custom-table .el-table__cell{ padding:0; height: 10px; } 4、每行显示不同的颜色 <el-table-column label=""align="center"width="40px"> <template #default="scope"><div :style="{backgroundColor:scope.row.color}" class...
<el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="序号" align="center" v-if="number == 3" > </el-table-column> <el-table-column prop="date" label="资产名称" align="center" v-if="number == 3 || number == 4 || number == 5" > </...
<el-tableclass="alarm"v-loading="loading":header-cell-style="{ background: '#0080D0' }":row-class-name="tableRowClassName"> 然后class绑定的alarm样式的实现 <style>.alarm .el-table__row td:nth-child(10) { color: #3be6f8; }</style> row-class-name:行的 className 的回调方法,也可以...
<el-table-column type="index" label="序号" width="80"> </el-table-column> <el-table-column type="selection" width="50"> </el-table-column> <el-table-column prop="date" label="日期" width="220"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> <...
1.行数据分色提示。 script部分: tableRowClassName({ row, rowIndex }) { if(row.name == 'John Doe'){ return 'gray-row';} else if(row.date == null) { return 'warning-row';} else if(row.manager == 'Bob') { return 'green-row';} else{ return ''; } }, style部分: .el-tab...
el-table行的颜色 el-table行的颜色可以通过设置CSS样式来修改。可以使用`row-class-name`属性来为行添加类名,然后在CSS中为相应的类名设置颜色样式。 例如,在el-table中设置`row-class-name`为"table-row",然后在CSS中定义"table-row"类名的颜色样式: ```html <el-table :data="tableData" row-class-...
element-loading-background="rgba(0, 0, 0, 0.8)" ></el-table> // 表格背景颜色调用 tableRowClassName({ row, rowIndex}) { var j = parseInt(rowIndex / 5); if (j % 2 === 0) { return "warning-row"; } else{ return "success-row"; } },...
主要实现的原理是利用每行的下标来实现单,偶区分,添加不同的样式 <el-table :data="tableData" fit :row-class-name="tableRowClassName"> <el-table-column type="index" label="序号"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> ...