elTable表头和表身分离的其他方法

你可以使用此方法获取elTable单独的表头 或者 表身 ，实现自己的个人操作。也可以在极端情况下（实现表头固定，表身滚动的官方方法失效情况下），在表身加入el-scrollor实现表身滚动。

  <el-table :data="[]" style="width: 99%">
              <el-table-column label="订单类型" header-align="center" />
              <el-table-column label="金额" header-align="center" />
              <el-table-column label="用户" header-align="center" />
              <el-table-column label="时间" header-align="center" />
            </el-table>
           
        <el-table :data="tableData" border stripe :show-header="false" style="width: 99%">
                <el-table-column prop="type" />
                <el-table-column prop="price" />
                <el-table-column prop="unitname" />
                <el-table-column prop="payTime" />
              </el-table>
           

CSS

:deep(.el-table__empty-block) {
  display: none !important; //把暂无数据的显示给去掉
}

评论区有人提问：当你要做复选的时候 你的表头因为没有数据所以是禁用？

扩展下问题：表头表身分离如何做到表头选择和表身全选同步，就是点下表头的选择框，表身全部勾选或全不勾选

HTML

<el-table :data="[1]" style="width: 99%" class="headerTable" @select-all="AllSelected"     ref="headerTable">
<!--将data设置为非空数组和添加选择列使表头出现选择框，这样的话就会出现一个表身，可以在css中把表身隐藏-->
              <el-table-column type="selection" width="55" />
              <el-table-column label="订单类型" />
              <el-table-column label="金额" />
              <el-table-column label="用户" />
              <el-table-column label="时间" width="150" />
            </el-table>
          
<el-table :data="tableData" border stripe :show-header="false" style="width: 99%" ref="tableChild" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="type" />
              <el-table-column prop="price">
                <template #default="scope"> ￥{{ scope.row.price }} </template>
              </el-table-column>
              <el-table-column prop="unitname" />
              <el-table-column prop="payTime" :formatter="formatter" width="150" />
</el-table>

JavaScript

   const tableChild = ref();
    const headerTable = ref();
    const AllSelected = (selection: any) => {
      tableChild.value!.toggleAllSelection(); //全选和反选切换
    };
    const handleSelectionChange = (val: any) => {
      console.log(val); //选中的数据
      if (val.length === tableData.value.length) {//如果表身勾选满了，就把表头勾选上
        headerTable.value!.toggleRowSelection(headerTable.value.data[0], true); 
      } else {
        headerTable.value!.clearSelection(); 
      }
    };

CSS

:deep(.el-table__empty-block) {
  display: none !important;
}
.headerTable :deep(.el-table__body-wrapper) {
  display: none;
}

演示

 

代码可能有错误，如有问题或者建议  ， 请在下方评论留言

2022/12/7