elementUI中 el-table 表格单元格非固定层级嵌套导致的高度自适应及单元格匹配对齐

遇到一个问题,ElementUI 下 el-table 表格单元格的高度自适应问题,及子单元格的层级对齐问题

elementUI中 el-table 表格单元格非固定层级嵌套导致的高度自适应及单元格匹配对齐_第1张图片
elementUI中 el-table 表格单元格非固定层级嵌套导致的高度自适应及单元格匹配对齐_第2张图片

要求实现为这个样子

elementUI中 el-table 表格单元格非固定层级嵌套导致的高度自适应及单元格匹配对齐_第3张图片

图片上可以看到有的单元格内嵌套的是多条数据,且不固定条数,例如评价维度列,为实现图二的效果,我这边对单元格及其子元素进行了定位处理,其子元素(渲染出来的div.cell)设置最小高度为100%,但是这种情况会导致高度塌陷,于是我为评价维度列的单元格子元素设置了取消定位,其他单元格子元素正常定位,这里这么操作是为了把单元格撑开(el-table渲染的时候行的高度默认跟随高度最大的子元素,但是定位导致了高度塌陷)。前面说了我对评价维度列的单元格子元素设置了取消定位,但我发现有些时候不能生效,那么我查找了原因。

不能生效的样式代码

elementUI中 el-table 表格单元格非固定层级嵌套导致的高度自适应及单元格匹配对齐_第4张图片

第一次渲染

elementUI中 el-table 表格单元格非固定层级嵌套导致的高度自适应及单元格匹配对齐_第5张图片

第二次渲染

elementUI中 el-table 表格单元格非固定层级嵌套导致的高度自适应及单元格匹配对齐_第6张图片

此时我发现类名在变化,这里的el-table_..._column_... 中(...)的值是不固定的,所以我之前设置的 el-table_1_column_13 的子元素不定位有时会失效,解决办法就是使用class-name属性为其添加一个独立的类名,将取消定位的css操作添加到这个类名下。

elementUI中 el-table 表格单元格非固定层级嵌套导致的高度自适应及单元格匹配对齐_第7张图片

你可能感兴趣的:(javaScript基础,javascript,css,vue.js)