<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"> </el-table-column> <el-table-column prop="address" label="年龄" width="240"> ...
item.className = "normal"; } }); } }, // 选中背景色 tableRowClassName({ row }) { return row.className; }, //点击行触发,切换复选框状态 handleRowClick(row) { this.$refs.multipleTable.toggleRowSelection(row); if (row.className === "normal") { row.className = "tableSelectedRowBgCol...
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...
methods:{//选中背景色tableRowClassName({row}){returnrow.className;},} 4、最后不要忘了写颜色类名喔 <style>.tableSelectedRowBgColor td{background-color:#fedcbd !important;}</style> 完整代码: View Code
在ElementUI中,表格(Table)组件的选中行背景色可以通过自定义样式来实现。ElementUI本身提供了一些默认的样式,但你也可以根据自己的需求进行修改。以下是如何设置ElementUI表格选中行背景色的详细步骤: 1. 确定ElementUI表格选中行的背景色设置方式 ElementUI表格选中行的背景色主要通过CSS样式来实现。你可以通过覆盖默认...
简介:VUE系列——ElementUI使用table时,选中某行或者鼠标移入某行时添加背景色 前言 Element官网给了单选的例子,给我们省了不少时间, 但是有时候选择一行之后并没有达到我们想要的效果 下面是官网给的例子: 一、需求 点击或者鼠标移入某一行之后,想要出现自定义的颜色 ...
tableRowClassName({ row, rowIndex }) { let color = ""; this.numbers.forEach((r, i) => { if (rowIndex === r) { color = "warning-row"; } }); return color; }, // 全选变色 handselectall(selection) { console.log(selection); ...
框架默认选中颜色太淡,直接进源码修改。 .el-table--striped .el-table__body tr.el-table__row--striped td{background:#FAFAFA}.el-table--striped .el-table__body tr.el-table__row--striped.current-row td,.el-table__body tr.current-row>td,.el-table__body tr.hover-row.current-row>td,...
element-ui表格选中行改变行颜色 element-ui表格选中⾏改变⾏颜⾊<el-table :row-class-name="tableRowClassName":data="every_list"@selection-change="handleSelectionChange"> /** * 改变表格每⼀⾏ ⽤forEach还不⾏。。⽤的for循环，this.selectList=[]是选中的数组列表，⽤索引和rowIndex⽐...
.el-table--enable-row-hover .el-table__body tr:hover > td { background-color: #92cbf1; } 1. 2. 3. 4. 5. 6. 7. 8. 9. 三、效果展示 扩展: VUE---使用ElementUI的table表格重构穿梭框 OK,GAME OVER! 更多精彩内容请关注:程序员高手之路 ...