Giter Club home page Giter Club logo

Comments (1)

xiaocheng555 avatar xiaocheng555 commented on June 2, 2024

以下是抖动视频 https://github.com/xiaocheng555/el-table-virtual-scroll/assets/30517805/ac9f3af0-c993-4140-a1e5-2477393c35d9 以下是Demo 源码,

<template>
  <div>
    <el-alert type="success" title="当数据量大于100条时开启虚拟滚动" show-icon></el-alert>
    <virtual-scroll
      :data="list2"
      :item-size="62"
      key-prop="id"
      :virtualized="list2.length > 100"
      @change="(renderData) => virtualList2 = renderData">
      <el-table
        v-el-table-infinite-scroll="loadMore"
        :class="loading ? 'no-empty' : ''"
        row-key="id"
        stripe
        :data="virtualList2"
        height="500px">
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column label="内容" prop="text" show-overflow-tooltip>
          <template v-slot:default="{row}">
            <div v-for="i in randomNum()" :key="i">
              {{row.text}}{{i}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="详情">
          <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 label="第n行" prop="id"></el-table-column>
        <el-table-column label="第n行" prop="id"></el-table-column>
        <el-table-column label="第n行" prop="id"></el-table-column>
        <el-table-column label="第n行" prop="id"></el-table-column>
        <el-table-column label="第n行" prop="id"></el-table-column>
        <el-table-column label="操作" width="260">
          <template slot-scope="{ row }">
            {{ row.id }}
            <el-button @click="onDel2(row)">删除</el-button>
            <el-button @click="onEdit2(row)">编辑</el-button>
          </template>
        </el-table-column>
        <div style="text-align: center; padding: 15px; color: #999;" slot="append" v-if="loading">
          加载中...
        </div>
      </el-table>
    </virtual-scroll>
    <b>行数: {{ virtualList2.length }}</b>
  </div>
</template>

<script>
import VirtualScroll from 'el-table-virtual-scroll'
import ElTableInfiniteScroll from 'el-table-infinite-scroll'

export default {
  components: {
    VirtualScroll,
  },
  directives: {
    ElTableInfiniteScroll
  },
  data () {
    return {
      count2: 0,
      list2: [],
      virtualList2: [],
      loading: false
    }
  },
  methods: {
    randomNum() {
      return Math.floor(Math.random() * 5) + 1
    },
    onEdit (row) {
      row.text =  row.text + '__编辑'
    },
    onDel2 (row) {
      const index = this.list2.findIndex(item => item === row)
      if (index > -1) {
        this.list2.splice(index, 1)
      }
    },
    loadMore () {
      if (this.loading) return

      this.loading = true
      setTimeout(() => {
        for (let i = 0; i < 30; i++) {
          this.count2++
          this.list2.push({
            id: this.count2,
            show: false,
            text: this.getRandomContent(),
            text2: this.getRandomContent()
          })
        }
        this.loading = false
      }, 1000)
    },
    getRandomContent () {
      const content = [
        '这是一条测试数据这是一条测试数据这是一条测试数据这是一条测试数据这是一条测试数据',
        '君不见黄河之水天上来,奔流到海不复回。',
        '十年生死两茫茫把酒问青天把酒问青天',
        '寻寻觅觅,冷冷清清,凄凄惨惨戚戚。',
        '桃花坞里桃花庵,桃花庵里桃花仙;桃花仙人种桃树,又摘桃花卖酒钱。',
        '明月几时有,把酒问青天。把酒问青天把酒问青天',
        '槛菊愁烟兰泣露,罗幕轻寒,',
        '寒蝉凄切,对长亭晚,骤雨初歇。都门帐饮无绪,留恋处,兰舟催发。执手相看泪眼,竟无语凝噎。念去去,千里烟波,暮霭沉沉楚天阔。多情自古伤离别,更那堪冷落清秋节!今宵酒醒何处?杨柳岸,晓风残月。此去经年,应是良辰好景虚设。便纵有千种风情,更与何人说?',
        '红豆生南国,春来发几枝。红豆生南国,春来发几枝。红豆生南国,春来发几枝。',
        '黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂'
      ]
      const i = Math.floor(Math.random() * 10)
      return content[i]
    }
  },
  created () {}
}
</script>

<style lang='less' scoped>
:deep(.no-empty) {
  .el-table__empty-block {
    display: none;
  }
}
</style>
<div v-for="i in randomNum()" :key="i">
        {{row.text}}{{i}}
</div>

虚拟组件在滚动的时候会重新渲染表格的内容,上面的写法是每次滚动重新渲染数据时内容行数都会变,因为取的随机数,导致表格行每次滚动都可能发生坍塌或撑开,页面表现就是抖动; 你要固定的内容显示行数,可以写在item里,item.lineCount = randomNum(),先计算好,在页面的时候使用item.lineCount

from el-table-virtual-scroll.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.