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

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

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

  1. <div class="table">
  2.           <vxe-table
  3.             :data="tableData"
  4.             ref="table">
  5.             <vxe-column
  6.               type="seq"
  7.               min-width="70"
  8.               title="序号"
  9.               align="center"
  10.               fixed="left"></vxe-column>
  11.             <vxe-column
  12.               v-for="(value, key) in allColumns"
  13.               :key="key + value"
  14.               :field="key"
  15.               :title="value">
  16.               <template #edit="{ row }">
  17.                 <vxe-input
  18.                   v-model="row[key]"
  19.                   resize="vertical"
  20.                   type="text"></vxe-input>
  21.               </template>
  22.             </vxe-column>
  23.           </vxe-table>
  24.         </div>
  25.         <div class="table1">
  26.           <vxe-table
  27.             @scroll="scroll"
  28.             :show-header="false"
  29.             height="100%"
  30.             ref="table1"
  31.             :data="tableData1">
  32.             <vxe-column
  33.               type="seq"
  34.               min-width="70"
  35.               title="序号"
  36.               align="center"
  37.               fixed="left"></vxe-column>
  38.             <vxe-column
  39.               v-for="(value, key) in allColumns"
  40.               :key="key + value"
  41.               :field="key"
  42.               :title="value"></vxe-column>
  43.           </vxe-table>
  44.         </div>

处理表格数据

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

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

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

  1. scroll({
  2.       scrollTop, scrollLeft }) {
  4.       this.$refs.table.scrollTo(scrollLeft, scrollTop);
  5.     },

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

  1. <style scoped lang="scss">
  2.       :deep(.table) {
  4.         .vxe-table--body-wrapper {
  6.           overflow: hidden;
  7.         }
  8.       }
  9.       :deep(.table1) {
  11.         .vxe-table--body-wrapper {
  13.           overflow-y: overlay;
  14.         }
  15.       }
  16. </style>

发表评论

表情：
评论列表 （有 0 条评论，118人围观）

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

相关阅读