Table: optimize performance

[cs1707]

Please make sure these boxes are checked before submitting your PR, thank you!

Both the left fixed table and the right fixed table render full columns from the DOM. Change to render only the required columns.

• Make sure you follow Element's contributing guide (中文 | English | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer relative issues for you PR.

[element-bot]

✔️ Deploy Preview for element ready!

🔨 Explore the source changes: d0e12cd

🔍 Inspect the deploy log: https://app.netlify.com/sites/element/deploys/614c346778afef0007d12dfa

😎 Browse the preview: https://deploy-preview-21330--element.netlify.app/

[cs1707]

ref: https://juejin.cn/post/7007252464726458399

[wangdaodao]

本地运行了下，发现严重bug：表格树+排序+固定列+插槽，导致固定列插槽出现展开收起图标，并且在排序后固定列高度出现错误。另外，在拖动浏览器宽度后，最后一列高度改变，整体表格行高也会计算错误。

代码

<template>
  <div>
    <el-table
      :data="tableData"
      row-key="id"
      default-expand-all
      border
      :default-sort="{prop: 'date', order: 'descending'}"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column
        prop="date"
        label="日期"
        sortable
        fixed
        width="180"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        sortable
        width="180"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="580"
      ></el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
    data() {
      return {
        tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄',
              children: [{
                id: 311,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                id: 321,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄',
                children: [{
                  id: 3111,
                  date: '2016-05-01',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄'
                }, {
                  id: 3211,
                  date: '2016-05-01',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄'
              }, {
                  id: 3221,
                  date: '2016-05-01',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄',
                  children: [{
                    id: 31111,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄'
                  }, {
                    id: 32111,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    id: 32211,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }]
              }]
            }, {
                id: 322,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }]
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

[github-actions]

🎊 PR Preview has been successfully built and deployed to https://preview-pr-21330-element-ui.surge.sh

[cs1707]

@wangdaodao 感谢反馈，最新提交做了下修复。

[wangdaodao]

@wangdaodao 感谢反馈，最新提交做了下修复。

已经验证，没有发现问题 :)

[DOCjx]

https://codepen.io/docjx/pen/dyzBXxb

列设置fixed之后高度计算会有问题，见例子

[gergulo]

https://codepen.io/gergulo/pen/XWeERRQ
使用表格，组合使用固定列、展开行时，展开后的行布局错误。

[XM2510136957]

树表格多选无法单独选中子节点问题

[wuyuweixin]

更新 2.15.7 后表格列宽出现抖动

[liuqi-web]

data变化之后没有自动同步高度，需要手动调用doLayout()

[dyyzht]

怀疑是不是你这版更新，导致直接给table加上class=“el-table”，然后展示出来的界面就没有样式了，无奈只能退回2.15.1是好的。兄弟能修复下吗，这个功能贼好用啊，别删了！！！

<table class="el-table ed_obisity"> <thead> <th class="thOne">序号</th> <th class="thTwo">问题</th> <th class="thThree">答案</th> </thead> <tbody> <tr> <td>1</td> <td>年龄</td> <td>{{ obisityResult.assessAge }}</td> </tr> <tr> <td>2</td> <td>性别</td> <td>{{ obisityResult.assessSex == 1 ? "男" : "女" }}</td> </tr> <tr> <td>3</td> <td>身高</td> <td>{{ obisityResult.assessHeight }}</td> </tr> <tr> <td>4</td> <td>体重</td> <td>{{ obisityResult.assessWeight }}</td> </tr> <tr> <td>5</td> <td>腰围</td> <td>{{ obisityResult.assessWaistline }}</td> </tr> <tr> <td>6</td> <td>手机号</td> <td>{{ ansBase.phone }}</td> </tr> <tr> <td>7</td> <td>证件号</td> <td>{{ ansBase.idCard }}</td> </tr> <tr> <td>8</td> <td>职业</td> <td>{{ ansBase.occupation }}</td> </tr> <tr> <td>9</td> <td>教育程度</td> <td>{{ ansBase.education }}</td> </tr> <tr> <td>10</td> <td>婚姻状况</td> <td>{{ ansBase.marriage }}</td> </tr> <tr> <td>12</td> <td>您几岁时分娩第一胎？</td> <td>{{ ansBase.childbirth }}</td> </tr> <tr> <td>13</td> <td>您是否曾哺乳？</td> <td>{{ ansBase.lactation }}</td> </tr> <tr> <td>14</td> <td>年收入</td> <td>{{ ansBase.income }}</td> </tr> <tr> <td>15</td> <td>惯用手</td> <td>{{ ansBase.hand }}</td> </tr> </tbody> </table>

[syp10000]

tabs下面放2个el-table,在切换tab的时候，2.15.8table会出现表头抖动，在2.15.6版本及之前没问题

[fukedi]

@syp10000 我也发现这个问题了,抖动很厉害,特别是出现横向滚动条的时候,抖动很明显.

[xtqjh]

table 横向滚动时表头明显延时

2022-06-01.10.00.35.mov

[raohuiyong]

@cs1707 现在还是有这个问题，菜单栏折叠的时候，table显示不是很友好，2.15.6之前的版本很正常