可编辑表格滚动错位

[stoneyyyysdg]

在可编辑表格里面，左侧固定的话，滚动的话会错位，请问有办法解决吗 ` <virtual-scroll ref="virtualScroll" :data="tableListData" row-key="rowKey" key-prop="rowKey" :item-size="100" @change="virtualList => (tableData = virtualList)"

<el-table height="500px" v-loading="loading" :columns="baseColumns" :border="true" align="center" :spanMethod="spanMethod" :header-cell-style="headerCellStyle" :cell-style="cellStyle" highlight-current-row element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" size="mini" :sortable="false" :data="tableData" ref="scrollTable" row-key="rowKey"

<el-table-column v-for="(column, index) in baseColumns" show-overflow-tooltip :key="column.prop" :label="column.label" :prop="column.prop || column.field" :width="column.width" :fixed="column.fixed" :min-width="column.minWidth" :type="column.type" align="center" :sortable="column.sortable" :render-header="column.renderHeader"

`

[xiaocheng555]

怎样错位的，只有滚动的时候错位吗，滚动完停止就不会吗 有图或者视频吗

[stoneyyyysdg]

是的，滚动完停止就不会错位

[stoneyyyysdg]

https://github.com/user-attachments/assets/d8b3e0a4-6a02-4696-a6ca-822937679036

[xiaocheng555]

https://xiaocheng555.github.io/el-table-virtual-scroll/#/VFixedDemo?code=VFixedDemo&codeTitle=%E5%9B%BA%E5%AE%9A%E5%88%97%EF%BC%88%E8%87%AA%E5%AE%9A%E4%B9%89%EF%BC%89 参考这个demo

[stoneyyyysdg]

好像还是不太行，里面还有一些合并表格的一些操作

[xiaocheng555]

好像还是不太行，里面还有一些合并表格的一些操作

贴一下代码

[stoneyyyysdg]

 <el-form ref="tableForm" :model="tableListData" size="mini">
    <template slot-scope="{ headerCellFixedStyle, cellFixedStyle }">
    <virtual-scroll
      ref="virtualScroll"
      :data="tableListData"
      row-key="rowKey"
      key-prop="rowKey"
      :item-size="56"
      :row-span-key="getRowSpanKey"
      @change="virtualList => (tableData = virtualList)"
    >
      <el-table
        height="500px"
        class="cust-oamsg-table oa-flow"
        v-loading="loading"
        :columns="baseColumns"
        :border="true"
        align="center"
        :spanMethod="spanMethod"
        :header-cell-style="headerCellStyle"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        size="mini"
        :sortable="false"
        :data="tableData"
        ref="scrollTable"
        row-key="rowKey"
        :cellStyle="cellFixedStyle"
      >
        <el-table-column
          v-for="(column, index) in baseColumns"
          show-overflow-tooltip
          :key="column.prop"
          :label="column.label"
          :prop="column.prop || column.field"
          :width="column.width"
          :fixed="column.fixed"
          :min-width="column.minWidth"
          :type="column.type"
          align="center"
          :sortable="column.sortable"
          :render-header="column.renderHeader"
        >
          <template slot="header">
            {{ column.label }}
          </template>
          <template slot-scope="scope">
            <span v-if="!column.render">{{ scope.row[column.prop] }}</span>
            <render-column
              v-else
              :render="column.render"
              :row="scope.row"
              :index="index"
              :data-index="scope.$index"
              :column="column"
              :data="tableListData"
            ></render-column>
          </template>
        </el-table-column>
      </el-table>
    </virtual-scroll>

[xiaocheng555]

 <el-form ref="tableForm" :model="tableListData" size="mini">
    <template slot-scope="{ headerCellFixedStyle, cellFixedStyle }">
    <virtual-scroll
      ref="virtualScroll"
      :data="tableListData"
      row-key="rowKey"
      key-prop="rowKey"
      :item-size="56"
      :row-span-key="getRowSpanKey"
      @change="virtualList => (tableData = virtualList)"
    >
      <el-table
        height="500px"
        class="cust-oamsg-table oa-flow"
        v-loading="loading"
        :columns="baseColumns"
        :border="true"
        align="center"
        :spanMethod="spanMethod"
        :header-cell-style="headerCellStyle"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        size="mini"
        :sortable="false"
        :data="tableData"
        ref="scrollTable"
        row-key="rowKey"
        :cellStyle="cellFixedStyle"
      >
        <el-table-column
          v-for="(column, index) in baseColumns"
          show-overflow-tooltip
          :key="column.prop"
          :label="column.label"
          :prop="column.prop || column.field"
          :width="column.width"
          :fixed="column.fixed"
          :min-width="column.minWidth"
          :type="column.type"
          align="center"
          :sortable="column.sortable"
          :render-header="column.renderHeader"
        >
          <template slot="header">
            {{ column.label }}
          </template>
          <template slot-scope="scope">
            <span v-if="!column.render">{{ scope.row[column.prop] }}</span>
            <render-column
              v-else
              :render="column.render"
              :row="scope.row"
              :index="index"
              :data-index="scope.$index"
              :column="column"
              :data="tableListData"
            ></render-column>
          </template>
        </el-table-column>
      </el-table>
    </virtual-scroll>

headerCellFixedStyle, cellFixedStyle 在virtual-scroll组件里面， el-table加上:headerCellStyle="headerCellFixedStyle" 和 :cellStyle="cellFixedStyle"，列组件用virtual-column组件，固定使用vfixed，且要固定列要按顺序放

[stoneyyyysdg]

好的，谢谢

[stoneyyyysdg]

我这个固定列里面包含一些合并表格的操作，请问是支持的吗

[oblvpromise]

我这个固定列里面包含一些合并表格的操作，请问是支持的吗

请问现在解决了吗 我这边也涉及到一些合并表格的操作