vxe-table库使用：实现固定第一行，其余可滚动（使用两个table拼接）

用两个table拼接在一块达成第一行固定住的效果
第一个表格只有一行
第二个表格:show-header="false"关闭表头

   <div class="table">
          <vxe-table
            :data="tableData"
            ref="table">
            <vxe-column
              type="seq"
              min-width="70"
              title="序号"
              align="center"
              fixed="left"></vxe-column>
            <vxe-column
              v-for="(value, key) in allColumns"
              :key="key + value"
              :field="key"
              :title="value">
              <template #edit="{ row }">
                <vxe-input
                  v-model="row[key]"
                  resize="vertical"
                  type="text"></vxe-input>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <div class="table1">
          <vxe-table
            @scroll="scroll"
            :show-header="false"
            height="100%"
            ref="table1"
            :data="tableData1">
            <vxe-column
              type="seq"
              min-width="70"
              title="序号"
              align="center"
              fixed="left"></vxe-column>
            <vxe-column
              v-for="(value, key) in allColumns"
              :key="key + value"
              :field="key"
              :title="value"></vxe-column>
          </vxe-table>
        </div>

处理表格数据

从后端获取表格数据，第一行赋值给第一个表格，其余行赋值给第二个表格

this.tableData = [res.data.tableData[0]];
this.tableData1 = res.data.tableData.slice(1);

第二个表格绑定scroll事件，触发第一个表格同步滚动

    scroll({
     
      scrollTop, scrollLeft }) {
    
    
      this.$refs.table.scrollTo(scrollLeft, scrollTop);
    },

第一个表格的横向滚动条隐藏，第二个表格的纵向滚动条不占位

<style scoped lang="scss">
      :deep(.table) {
      
      
        .vxe-table--body-wrapper {
      
      
          overflow: hidden;
        }
      }
      :deep(.table1) {
      
      
        .vxe-table--body-wrapper {
      
      
          overflow-y: overlay;
        }
      }
</style>