el-table 设置斑马纹的效果,改变鼠标移入时和斑马纹的默认颜色

news/2024/11/23 3:02:13/

前提条件,引用了预处理,可以使用 /deep/ 或 ::v-deep ,没有使用预处理,使用 >>>

html 部分

<template><el-table:data="tableData":row-class-name="tableRowClassName":header-cell-style="{background:'rgb(237, 192, 255)'}"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template>

script 部分 

<script>export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}},methods: {//   tableRowClassName ({ row, rowIndex }) {//   if (row.sfjg == 1) {//     return "el-table__row--striped";//   } else {//     return "";//   }// },tableRowClassName ({ row, rowIndex }) {if (rowIndex % 2 !== 0) {return 'el-table__row--striped'}},}}
</script>

style 部分

<style lang="less" scoped>
::v-deep .el-table__body tr,
::v-deep .el-table__body td {padding: 0;height: 34px;
}
// 显示的颜色::v-deep .el-table__body tr.el-table__row--striped td {background-color: pink;}::v-deep .el-table__row {background: rgb(187, 255, 0);}::v-deep .el-table__body tr:hover > td{background-color:rgb(0, 247, 255) !important;
}</style>

对于组件流体高度这个示例会有bug,可以根据 .hover-row 在element-ui 的原文件中更改鼠标移入时的样式,把斑马纹打开,通过 tr.el-table__row--striped.current-row td.el-table__cell 在原文件中更改斑马纹的背景色


http://www.ppmy.cn/news/223072.html

相关文章

斑马打印机wifi连接

安装Zebra Setup Utilities.exe&#xff0c;打开软件 https://www.zebra.cn/cn/zh/support-downloads/printers-cn/zr328.html 点击相应的打印机(如果无打印机设备&#xff0c;请点击右侧的安装打印机安装驱动)配置打印机连接属性 - [ ] 未连接成功时注意IP是否正确

[转]马与斑马

马与斑马 [英]迈尔斯.金顿 从前&#xff0c;非洲的草原上有一群斑马&#xff0c;它们遇到了一匹在野外游荡的马。马想加入它们的队伍。斑马愉快地接纳了它。 马对身边的斑马说&#xff1a;“你们为什么都有黑白条纹&#xff1f;我从没看见过这样糟糕的伪装。别人在几英里以外…

斑马GK888t 通过IP访问连接

1.通过USB线下载安装好驱动 2.设置打印机的IP地址&#xff0c;需要将本机的无线和有线网络关闭&#xff0c;通过网线连接电脑和打印机&#xff0c;如果电脑没有设置IP地址记得设置一下&#xff0c;不要与之后的打印机地址相同。&#xff08;注意&#xff0c;USB口的线和网线最…

斑马打印机ZT230踩坑记

按出厂示意图正确安装色带和打印标签后&#xff0c;如果需要正常打印&#xff0c;还需要进行“介质/色带校准”。具体可以看下载链接中的视频。正确校准后&#xff0c;可以使用打印机提供的打印功能进行测试。通过打印线连接电脑&#xff0c;安装下载链接中的打印机驱动程序。设…

【STM32单片机】基于语音识别的智能分类垃圾桶,ld3320语音识别模块如何使用,mp3播放模块如何使用

文章目录 需求语音识别模块MY1690 播放模块舵机源码 需求 对于“可回收物”“有害垃圾”“厨余垃圾”“其它垃圾”&#xff0c;不能分清扔到哪个垃圾桶怎么办&#xff1f; 基于语音识别的智能分类垃圾桶&#xff0c;识别到关键词就打开对应的垃圾桶&#xff0c;完全没有分不清…

斑马ZT510打印设置

这里写自定义目录标题 斑马ZT510打印设置语言设置IP设置驱动安装添加打印机其他资源 斑马ZT510打印设置 语言设置 打开主菜单 选择语言&#xff0c;简体中文 IP设置 打开主菜单&#xff0c;选择网络 找到有线IP&#xff0c;设置网络IP地址 设置子网 掩码 设置有线网关…

斑马打印机gk888t的安装和使用

1、样子 2、下载驱动&#xff0c;安装&#xff0c;一直next&#xff0c;next 点击安装打印机&#xff0c;选择GK888t 下一步&#xff0c;选择usb 点击完成&#xff0c;进入下面页面 安装文字 然后一直下一步&#xff0c;下一步&#xff0c;直到完成。 完成之后&#xff0c;进行…

斑马问题答案C语言,斑马的问题

摘引&#xff1a; 作者简介 谢尔希尔弗斯坦&#xff0c;美国著名诗人、插画家、剧作家、作曲家、乡村歌手。 主要作品有《爱心树》、《失落的一角》、《失落的一角遇见大圆满》、《人行道的尽头》、《向上跌了一跤》、《阁楼上的光》。简单朴实的插图和浅显的文字&#xff0c;充…