vue 虚拟滚动vue-virtual-scroll-list+拖拽sortablejs

webhejian

于 2022-02-22 18:02:32 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js list javascript

本文链接：https://blog.youkuaiyun.com/webhejian/article/details/123074069

本文介绍了如何在Vue项目中结合vue-virtual-scroll-list实现高效虚拟滚动，并利用sortablejs实现列表元素的拖拽排序功能。通过这种方式，可以优化大量数据列表的显示性能，同时提供友好的用户交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="hello">
    <virtual-list
      id="list"
      style="height: 1000px; overflow-y: auto"
      :data-key="'id'"
      :data-sources="items"
      :data-component="itemComponent"
    />
  </div>
</template>

<script>
import Sortable from "sortablejs";
import Item from "./item";
import VirtualList from "vue-virtual-scroll-list";
const  createData = (num) => {
  let list = [];
  for (let index = 0; index < num; index++) {
    const obj = { id: index };
    list.push(obj);
  }
  return list;
}
export default {
  components: { VirtualList },
  data() {
    return {
      itemComponent: Item,
      items: createData(10000),
    };
  },
  mounted() {
    const el = document.querySelector('#list>div')
    Sortable.create(el, {
      onMove: (evt) => {
        const { dragged, related } = evt;
        console.log(dragged, related); // 拿到拖动元素和交换位置的相关元素，可做一些操作，比如某些条件下禁止拖动排序
      },