vue-virtual-draglist

可拖拽排序的表格组件（暂不支持拖拽和表格）

Simple usage

npm i vue-virtual-draglist -D

Root component:

<template>
  <div>
    <virtual-drag-list
      :data-key="'uid'"
      :data-source="list"
    >
      <template #item="{ record, index, dataKey }">
        {{ record.text }}
      </template>
      <template slot="header"></template>
      <template slot="footer"></template>
    </virtual-drag-list>
  </div>
</template>

<script>
  import virtualDragList from 'vue-virtual-draglist'

  export default {
    name: 'root',
    data () {
      return {
        list: [{id: '1', text: 'asd'}, {uid: '2', text: 'fgh'}, ...]
      }
    },
    components: { virtualDragList }
  }
</script>

Props type

Required props

Prop	Type	Description
data-key	String	每一条数据的唯一标识
data-source	Array	数据源

Optional props

Commonly used

Prop	Type	Default	Description
keeps	Number	30	虚拟滚动展示的数据量
size	Number	50	每一条数据的预估高度，可选择传或不传，会自动计算

Public methods

Usefull public methods

使用 ref 去获取组件内部的方法

Method	Description
scrollToBottom()	滚动到底部
scrollToIndex(index)	滚动到指定index值位置
scrollToOffset(offset)	滚动到指定高度