天津市建设教育培训中心网站,网站关键词和描述,最潮流的网站开发脚本语言,销售管理系统数据流图问题:
在el-table每一行获得焦点与鼠标经过时#xff0c;显示一个整行的阴影悬浮效果
/*其中#xff0c;table-row-checkd是我自定义的焦点行添加类名#xff0c;大家可以自己起名*/
.el-table tbody tr:hover,.el-table tbody tr.table-row-checked{box-shadow: 0px 3px …问题:
在el-table每一行获得焦点与鼠标经过时显示一个整行的阴影悬浮效果
/*其中table-row-checkd是我自定义的焦点行添加类名大家可以自己起名*/
.el-table tbody tr:hover,.el-table tbody tr.table-row-checked{box-shadow: 0px 3px 10px 1px rgba(0,0,0,0.06)!important;
}没有什么效果 原因: box-shadow对display:table-row元素是不起作用的
解决方案
.el-table tbody tr.table-row-checked,.el-table tbody tr:hover{position:relative;background:#fff;
}
.el-table tbody tr.table-row-checked::after,.el-table tbody tr:hover::after{position:absolute;content: ;width:100%;height:100%;left:0;background:transparent;box-shadow:0 3px 10px 1px rgba(0,0,0,0.1);
}
弊端 给el-table行加阴影的问题算是解决了但是却导致表格内容无法操作
1、通常项目设计中el-table会带一些按钮比如删除、编辑某行数据等要求。由于after将tr覆盖这些按钮也会被覆盖 2、如果用到show-overflow-tooltip这个属性同以上原理也会被遮挡操作
弊端解决 1、2解决 对于需要点击等操作的列就不能按以下这样的普通方式了
el-table-column proploginDate label登录时间/el-table-column
需要将内容用template重新包装
el-table :row-class-namerowChecked row-clickgetRow tooltip-effectlight
el-table-column label登录时间 :show-overflow-tooltiptruetemplate v-slotscopespan classedit-tr clicktoUserDetail(scope.row){{scope.row.loginDate}}/span/template
/el-table-column
/el-table
附加解释 ①、:show-overflow-tooltiptrue如果el-table内td的内容超长则显示英文省略号并且鼠标移入该单元格弹出气泡气泡中显示单元格内容 ②、tooltip-effectlight设置弹出气泡的风格默认dark(黑色气泡)。这里设置light会将气泡背景变为白色 ③、如果el-table-column内用到template v-slotscope并在template中处理数据那么在el-table-column标签内写不写prop都不会有影响
.edit-tr{position:relative;/*重点*/z-index:2;/*重点*/width:100%;overflow:hidden;text-overflow:ellipsis;
}
优化 每行左右两边的阴影被遮挡毕竟tr有tbody\table等父元素被遮挡没有直接的解决办法。
但是由于新添加的伪元素使用定位实现左右阴影是可以的。 以下重写对新增after的样式
.el-table tbody tr.table-row-checked::after,.el-table tbody tr:hover::after{position:absolute;content: ;width:calc(100% - 6px);/*改动处*/height:100%;left:3px;/*改动处*/background:transparent;box-shadow:0 3px 10px 1px rgba(0,0,0,0.1);
}
解释 将after宽度预留出左右阴影区域宽度并向左偏移一点距离这样就能将原先遮挡的左右阴影显示出来设计图对el-table行左右两端无border情况下效果更佳 建议 我的项目中对tr上下有border左右无border本来想把上下的阴影也放到tr内但发现上下在border影响下视觉会有一种上下内阴影的效果所以after的高度还采用和tr高度一致仅对左右进行处理。 如果你的tr上下左右都有border这种情况下四边做内阴影突出焦点行是一种不错的选择。 参考
el-table行添加阴影悬浮效果
