el-table：fixed+expend同时用存在的样式问题

「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」

目的

想要做一个表格套表格，且有固定列并正常展示

目前问题是：element-ui el-table组件-----如果同时使用expand和 fixed的话，expand中的内容会被分割成(瘦fixed影响而被分割),从而导致展开的内容不具有连续性

一、目前的错误效果

1.gif

2.图片

二、修改后正确的效果

1.gif

2.代码图

3.代码

html

<el-table>
    <el-table-column type="expand">
                <template slot-scope="scope">
                  <div class="tableBox">
                  </div>
                </template>
    </el-table-column>
    ...
</el-table>

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 的那一列的边框去掉

这时当缩放浏览器时会出现表头错位的情况，需要再加一个样式