element-plus中el-table点击单行修改背景色方法
更新时间:2023年07月08日 10:49:43 作者:叶子_o
这篇文章主要给大家介绍了关于element-plus中el-table点击单行修改背景色的相关资料,这是产品新加了的一个需求,分享给同样遇到这个需求的朋友,需要的朋友可以参考下
需求描述:
element-plus + el-table 点击行选中并修改背景色+文字颜色
代码实现:
方法一:
重点:
highlight-current-row
<el-table highlight-current-row > /* 选中某行时的背景色*/ .el-table__body tr.current-row > td { color: #28A458; background: rgb(197, 213, 255) !important; }
element-plus 本身有给提供这个功能,而且比第二个方法更好用,第二个方法在有列固定的情况下,样式会不生效,所以建议直接用第一种
方法二:
重点:
- @row-click
- :row-style
<el-table :data="detectionTableList" stripe style="width: 100%" height="250" @row-click="handleSelect" :row-style="cellStyle" >
const state = reactive({ checkNumber: "", // 存储选中的 }) // 单击选中一行 const handleSelect = (row: getRecordItem) => { state.checkNumber = row.checkNumber; // 我这里 checkNumber 是唯一的 }; // 更改选中行背景色 const cellStyle = (row: any) => { if (state.checkNumber === row.row.checkNumber) { // 注意!!!这里是 row.row.checkNumber return { backgroundColor: "rgb(197, 213, 255) !important", color: "#28A458 !important", cursor: "pointer", }; } return { cursor: "pointer" }; };
总结
到此这篇关于element-plus中el-table点击单行修改背景色的文章就介绍到这了,更多相关el-table点击单行修改背景色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框
最近遇到了个需求是使用element-ui插件编写页面,点击按钮,弹出对话框,这篇文章主要给大家介绍了关于Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框的相关资料,需要的朋友可以参考下2022-11-11element ui watch el-input赋值之后无法删除或修改问题
这篇文章主要介绍了element ui watch el-input赋值之后无法删除或修改问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
最新评论