遇到一个问题,ElementUI 下 el-table 表格单元格的高度自适应问题,及子单元格的层级对齐问题
要求实现为这个样子
图片上可以看到有的单元格内嵌套的是多条数据,且不固定条数,例如评价维度列,为实现图二的效果,我这边对单元格及其子元素进行了定位处理,其子元素(渲染出来的div.cell)设置最小高度为100%,但是这种情况会导致高度塌陷,于是我为评价维度列的单元格子元素设置了取消定位,其他单元格子元素正常定位,这里这么操作是为了把单元格撑开(el-table渲染的时候行的高度默认跟随高度最大的子元素,但是定位导致了高度塌陷)。前面说了我对评价维度列的单元格子元素设置了取消定位,但我发现有些时候不能生效,那么我查找了原因。
不能生效的样式代码
第一次渲染
第二次渲染
此时我发现类名在变化,这里的el-table_..._column_... 中(...)的值是不固定的,所以我之前设置的 el-table_1_column_13 的子元素不定位有时会失效,解决办法就是使用class-name属性为其添加一个独立的类名,将取消定位的css操作添加到这个类名下。