编写代码以应用选中的行变色样式: 你需要编写CSS来定义选中行的样式,并在表格组件中使用row-class-name方法根据当前行的选中状态应用这个样式。 下面是一个示例代码: html <template> <el-table :data="tableData" @row-click="handleRowClick" :row-class-name="tableRowClassName" highlight-current...
一、需求 点击或者鼠标移入某一行之后,想要出现自定义的颜色 二、解决方法 直接在style里面添加下面的样式即可 /* 选中某行时的背景色*/.el-table__body tr.current-row > td {background-color: #92cbf1 !important;}/*鼠标移入某行时的背景色*/.el-table--enable-row-hover .el-table__body tr:hov...
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 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"> <...
3、className的回调方法 methods:{//选中背景色tableRowClassName({row}){returnrow.className;},} 4、最后不要忘了写颜色类名喔 <style>.tableSelectedRowBgColor td{background-color:#fedcbd !important;}</style> 完整代码: View Code
element-ui表格选中行改变行颜色 element-ui表格选中⾏改变⾏颜⾊<el-table :row-class-name="tableRowClassName":data="every_list"@selection-change="handleSelectionChange"> /** * 改变表格每⼀⾏ ⽤forEach还不⾏。。⽤的for循环，this.selectList=[]是选中的数组列表，⽤索引和rowIndex⽐...
element-ui 表格选中行改变行颜色 <el-table :row-class-name="tableRowClassName" :data="every_list" @selection-change="handleSelectionChange" > /** * 改变表格每一行 用forEach还不行。。用的for循环, this.selectList=[]是选中的数组列表,用索引和rowIndex比较,...
</template></el-table-column><el-table-columnprop="model"label="型号"></el-table-column><el-table-columnprop="color"label="颜色"></el-table-column><el-table-columnprop="size"label="尺寸"></el-table-column><el-table-columnprop="num"label="现库存"></el-table-column></el-table>...
框架默认选中颜色太淡,直接进源码修改。 .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,...
本方案支持颜色自定义,高亮行数自定义,可高亮多行,可定义多个颜色,主要实现方式是css样式,代码简单易懂,下面看效果和代码吧: 当前效果: 预期效果: 代码:这是HTML代码 绑定这个属性:row-class-name=“tableRowClassName” ``` <el-table :data="tableData" style="width: 100%" :row-class-name="tableRow...