element-UI table选中行背景颜色修改 <style lang="less" scoped>/** 表单间距*/::v-deep .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row>td{color:#fff;background-color:#a2a4a7!important; }::v-deep .el-table__body tr.cu...
<el-table-column prop="date" label="日期" width="220"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="年龄" width="240"> </el-table-column> </el-table> </div> </template> <script> expo...
methods:{//选中背景色tableRowClassName({row}){returnrow.className;},} 4、最后不要忘了写颜色类名喔 <style>.tableSelectedRowBgColor td{background-color:#fedcbd !important;}</style> 完整代码: View Code
下面是官网给的例子: 一、需求 点击或者鼠标移入某一行之后,想要出现自定义的颜色 二、解决方法 直接在style里面添加下面的样式即可 /* 选中某行时的背景色*/.el-table__body tr.current-row > td {background-color: #92cbf1 !important;}/*鼠标移入某行时的背景色*/.el-table--enable-row-hover .el...
主要看 :cell-class-name="tableCellClassName" :header-cell-class-name="tableCellClassName" 和 css 的 ::v-deep 最后,如果是嵌套表格,那就是挨着的都要写上 <el-table:data="tableData"style="width:100%":cell-class-name="tableCellClassName":header-cell-class-name="tableCellClassName"></el-tabl...
tableRowClassName({ row, rowIndex }) { let color = ""; this.numbers.forEach((r, i) => { if (rowIndex === r) { color = "warning-row"; } }); return color; }, // 全选变色 handselectall(selection) { console.log(selection); ...
elementui表格隔行换色 elementui table 改变某一行 在后台管理系统项目中,经常会使用element-ui中的组件el-table(表格)来展示列表数据。 当展示数据的时候,可能就需要给给某一行或者列设置特殊的样式,在查询文档是我遇到了一些问题:包括设置某一行或列样式的方式;包括设置指定类名后选择器无效问题。。。 首先...
:row-class-name="tableRowClassName" :row-style="selectedHighlight" 2. js代码 // 解决当表格有固定列,点击,鼠标悬浮的时候行会变色的问题 tableRowClassName({ row, rowIndex }) { //把每一行的索引放进row row.index = rowIndex; }, // 解决当表格有固定列,点击,鼠标悬浮的时候行会变色的问题 ...
本方案支持颜色自定义,高亮行数自定义,可高亮多行,可定义多个颜色,主要实现方式是css样式,代码简单易懂,下面看效果和代码吧: 当前效果: 预期效果: 代码:这是HTML代码 绑定这个属性:row-class-name=“tableRowClassName” ``` <el-table :data="tableData" ...