Table: fixed row-style with display not work (#17002)

packages/table/src/table-body.js

@@ -321,9 +321,13 @@ export default {
         rowClasses.push('el-table__row--level-' + treeRowData.level);
         display = treeRowData.display;
       }
+      // 指令 v-show 会覆盖 row-style 中 display
+      // 使用 :style 代替 v-show https://github.com/ElemeFE/element/issues/16995
+      let displayStyle = display ? null : {
+        display: 'none'
+      };
       return (<tr
-        v-show={display}
-        style={ this.getRowStyle(row, $index) }
+        style={ [displayStyle, this.getRowStyle(row, $index)] }
         class={ rowClasses }
         key={ this.getKeyOfRow(row, $index) }
         on-dblclick={ ($event) => this.handleDoubleClick($event, row) }

test/unit/specs/table.spec.js

@@ -182,7 +182,7 @@ describe('Table', () => {
         methods: {
           tableRowStyle({row, rowIndex}) {
             if (rowIndex === 1) {
-              return { height: '60px' };
+              return { height: '60px', display: 'none' };
             }
 
             return null;
@@ -191,8 +191,12 @@ describe('Table', () => {
       });
 
       setTimeout(_ => {
-        expect(vm.$el.querySelector('.el-table__body tr:nth-child(1)').style.height).to.equal('');
-        expect(vm.$el.querySelector('.el-table__body tr:nth-child(2)').style.height).to.equal('60px');
+        let child1 = vm.$el.querySelector('.el-table__body tr:nth-child(1)');
+        let child2 = vm.$el.querySelector('.el-table__body tr:nth-child(2)');
+        expect(child1.style.height).to.equal('');
+        expect(child1.style.display).to.equal('');
+        expect(child2.style.height).to.equal('60px');
+        expect(child2.style.display).to.equal('none');
         destroyVM(vm);
         done();
       }, DELAY);