第一种选中复选框表格变色 效果图: 第二种 点击行 表格变色 + 鼠标经过无hover效果 效果图: 第三种 鼠标经过自定义hover颜色效果 效果图: 第四种 点击某一事件表格背景色 变化 效果图: 结语: @selection-change="selected" 复选框被选中的触发事件 @row-click="rowClickEv" 某一行被点击行触发事件 :row-...
methods:{//选中背景色tableRowClassName({row}){returnrow.className;},} 4、最后不要忘了写颜色类名喔 .tableSelectedRowBgColor td{background-color:#fedcbd !important;} 完整代码: View Code
css 的 ::v-deep 最后,如果是嵌套表格,那就是挨着的都要写上 <el-table:data="tableData"style="width:100%":cell-class-name="tableCellClassName":header-cell-class-name="tableCellClassName"></el-table> tableCellClassName({column}){if(column.label=="总数量"||column.label=="法人/个体"||col...
{ goods_sku: "2" }, { goods_sku: "3" }, { goods_sku: "4" }, { goods_sku: "5" }, { goods_sku: "6" }, { goods_sku: "7" }, { goods_sku: "8" }, { goods_sku: "9" }, { goods_sku: "10" }, { goods_sku: "11" } ], numbers: [] }; }, computed: {},...
>/** * 改变表格每一行 用forEach还不行。。用的for循环, this.selectList=[]是选中的数组列表,用索引和rowIndex比较, 相等就是同一行,然后改变这一行的颜色 **/tableRowClassName({row,rowIndex}) { let self=thisfor(let i=0;i<self.selectList.length;i++) {if(rowIndex ===self.selectList[i]...
element 表格填充单元格背景颜色 elementui表格选中背景色 需要用到elementui表格的 1,行样式添加的事件 tableRowClassName ;2,行点击事件 rowClick;3,如果表格有复选框还需要用到复选框选择事件 select。 直接干代码: 1.页面组件***.vue <template>
一、需求 点击或者鼠标移入某一行之后,想要出现自定义的颜色 二、解决方法 直接在style里面添加下面的样式即可 /* 选中某行时的背景色*/.el-table__body tr.current-row > td {background-color: #92cbf1 !important;}/*鼠标移入某行时的背景色*/.el-table--enable-row-hover .el-table__body tr:hov...
简介:vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题 今天写了一些代码,是有关合同审核成功之后,整条数据显示绿色,针对已经作废的数据整条显示红色。以下是解决方案。 1 在表格头添加。:cell-style="tableRowClassName" <el-table :cell-style="tableRowClassName"></<el-table> ...
如上图所示的代码,点击某一行后该行表格的背景颜色会变成黄色。 但是,如果我们再次点击后,该行并不会取消高亮,点击其他行后高亮效果会在其他行生效,这并不完全符合我们的使用习惯。 因此,如果是为了点击高亮,双击后取消高亮的话,我们还需要额外的设置。
效果图：html（elementui：表格属性：:cell-class-name="tableCellClassName"）<el-table :data="table...