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

我就是我 2024-03-22 17:07 69阅读 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 条评论，69人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关使用R语言的data.table库进行滚动数据连接

使用R语言的data.table库进行滚动数据连接在时间序列数据分析中，滚动数据连接是一种常用的方法。该方法允许我们在两个数据集之间进行连接，并根据时间标志来选择符合条件的

朴灿烈づ我的快乐病毒、/ 2023年10月14日 22:09/ 0 赞/ 46 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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