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

我就是我 2024-03-22 17:07 71阅读 0赞

用两个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>

发表评论取消回复

表情：

评论列表（有 0 条评论，71人围观）

还没有评论，来说两句吧...

相关阅读

相关 table表头固定只让内容滚动

table表头固定只让内容滚动纯css实现表头固定，只tbody滚动需要用到粘性固定属性 – position:sticky position:sticky

曾经终败给现在/ 2024年03月26日 16:51/ 0 赞/ 101 阅读

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

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

我就是我/ 2024年03月22日 17:07/ 0 赞/ 72 阅读

相关 table表头固定并添加滚动条

实现表头锁定的方式很多，这里这种方式是比较简单，并且是没有任何问题的；完整代码示例： <!DOCTYPE html>

古城微笑少年丶/ 2024年02月19日 17:01/ 0 赞/ 62 阅读

相关 iOS使用table刷新跳第一行

假如多个标签共同使用同一个table，在页面切换时刷新table，使其跳转到第一行 [self.tableView reloadData];

蔚落/ 2023年10月17日 18:06/ 0 赞/ 38 阅读

相关 table禁止标题行随数据行滚动的简单实现

在工作中,总是会遇到列表展示,在列表展示时,会要求标题行不动,其余数据行滚动情况.如果有框架,那么使用框架是最简单的. 那么不使用框架时,怎么办呢?那就是抄框架的底层实现.

╰半夏微凉°/ 2023年02月13日 14:40/ 0 赞/ 3 阅读

相关 vue项目使用el-table实现无限滚动

vue项目使用el-table实现无限滚动案例如图所示，该案例是一个弹框内容 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVp

爱被打了一巴掌/ 2022年11月27日 03:26/ 0 赞/ 420 阅读

相关使用bootstrap框架实现内容滚动条滚动显示表格table固定表头

使用bootstrap框架实现内容滚动条滚动显示表格table固定表头实现效果 html代码实现效果 ![在这里插入图片描述][wa

àì夳堔傛蜴生んèń/ 2022年09月03日 10:19/ 0 赞/ 1132 阅读

相关使用html中的table实现内容滚动下拉表头固定不动的方法

使用html中的table实现内容滚动下拉表头固定不动的方法实现效果图 html代码和css样式关键之处实现效果图

朱雀/ 2022年09月03日 10:17/ 0 赞/ 28 阅读

相关 table表头固定，内容可滚动问题

1.首先新建html页面body中写入： <div class="title_div" id="tdiv"> <table class="tit

偏执的太偏执、/ 2022年06月02日 01:12/ 0 赞/ 251 阅读

相关 Vue基于ElementUI实现Table首行固定

.el-table--scrollable-x .el-table__body-wrapper { overflow: scroll !importa

朱雀/ 2021年12月23日 14:01/ 0 赞/ 1282 阅读