el |
您所在的位置：网站首页 › vue表格嵌套表格样式问题 › el |
el
|
「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」 目的想要做一个表格套表格，且有固定列并正常展示 目前问题是：element-ui el-table组件-----如果同时使用expand和 fixed的话，expand中的内容会被分割成(瘦fixed影响而被分割),从而导致展开的内容不具有连续性 一、目前的错误效果 1.gifhtml ...css /deep/ .el-table__body-wrapper { .el-table__expanded-cell { z-index: 100; padding: 0; } } /deep/ .el-table__fixed, /deep/.el-table__fixed-right { .el-table__expanded-cell { visibility: hidden; padding: 0; } } .tableBox { border: 1px solid #ebeef5; width: 100%;//calc(100vw - 200px);// 适合自己项目的宽度就行了 background: #fff;//盖住fixed产生的阴影 border-bottom: none; ::v-deep .is-leaf { height: 40px; color: #1b2e3b; background: #ebeef5; } } 4.代码原理注：表格中使用min-width="80"设置宽度，fixed无效，需改为width="",再设置fixed 如果加了fixed之后,element会把table固定的那列单独复制一份，而我们在页面上看到的是表格重叠后展示的最终样式 所以中的expand模板中嵌套一个table，这个table会被渲染两次 具有fixed属性的table会这样，因为现在 fixed table 的实现方式就是用多个 table 拼装而成的，实现方式不一样 一些相关的css样式问题： 对type=expand属性的箭头展开样式隐藏 同时要让width=1 的那一列的边框去掉 这时当缩放浏览器时会出现表头错位的情况，需要再加一个样式 |
【本文地址】
今日新闻 |
推荐新闻 |