xiaocheng555 / el-table-virtual-scroll

基于Element-UI的Table 组件开发的虚拟滚动组件,支持动态高度,解决数据量大时滚动卡顿的问题。
224 stars 41 forks source link

`VirtualColumn` 使用 vfixed 若 left 不在最前,right 不在最后,将无效 #90

Closed xieqx1991 closed 2 months ago

xieqx1991 commented 2 months ago
 <virtual-scroll
      ref="virtualScroll"
      :data="list"
      :item-size="56"
      key-prop="id"
      @change="(virtualList) => (tableData = virtualList)"
    >
      <template slot-scope="{ headerCellFixedStyle, cellFixedStyle }">
        <el-table
          :data="tableData"
          :headerCellStyle="headerCellFixedStyle"
          :cellStyle="cellFixedStyle"
          border
          stripe
          row-key="id"
          height="600px"
          style="width: 100%"
          @header-dragend="onHeaderDragend"
        >
          <VirtualColumn
            v-if="show"
            vfixed
            prop="date"
            label="日期"
            min-width="180"
          >
          </VirtualColumn>
          <VirtualColumn
            vfixed
            prop="name"
            label="姓名"
            :formatter="formatter"
            min-width="150"
          >
          </VirtualColumn>
          <VirtualColumn vfixed="right" label="id" prop="id"></VirtualColumn> <!--   right无效  -->
          <VirtualColumn
            vfixed
            label="内容"
            width="260"
            prop="text"
          ></VirtualColumn>
          <el-table-column
            label="内容省略"
            width="260"
            prop="text"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="详情" min-width="260">
            <template slot-scope="{ row }">
              <el-button type="text" @click="row.show = !row.show">{{
                row.show ? "隐藏" : "显示"
              }}</el-button>
              <div v-if="row.show">{{ row.text2 }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="province" label="省份" width="150">
          </el-table-column>
          <el-table-column prop="province" label="省份" width="200">
          </el-table-column>
          <el-table-column
            class-name="province"
            prop="province"
            label="省份"
            width="200"
          >
          </el-table-column>
          <el-table-column
            className="city"
            prop="city"
            label="市区"
            width="320"
          >
          </el-table-column>
          <VirtualColumn vfixed prop="address" label="地址" width="300"> <!--   left无效  -->
          </VirtualColumn>
          <VirtualColumn vfixed="right" prop="zip" label="邮编" width="150">
          </VirtualColumn>
          <VirtualColumn vfixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </VirtualColumn>
        </el-table>
      </template>
    </virtual-scroll>
xieqx1991 commented 2 months ago

image

xiaocheng555 commented 2 months ago

image

是的,设计如此