vxe-list vue 如何实现下拉框的虚拟列表

实现下拉框的虚拟列表可以优化大数据量情况下的性能，提升用户体验。本文将介绍如何在vxe-list组件中实现虚拟列表。

一、vxe-list组件

vxe-list 是一款Vue的表格和代码编辑器。它可以以树状或断面等形式，支持树状数据结构的渲染和可编辑性，还可以更改代码高亮。下面是官方github链接：https://github.com/xuliangzhan/vxe-table/blob/master/packages/list/README.md

其中，vxe-list提供了virtual-scroll参数，该参数可以开启虚拟滚动，解决大数据量渲染的卡顿问题。

二、实现过程

将vxe-list组件配置中的height和virtual-scroll参数设置为一个数值，如下所示：

<vxe-list
 :height="300"
 :virtual-scroll="{size: 20}"
>
...
</vxe-list>

其中，height参数代表组件的高度，当数据量较小时，可以不使用虚拟滚动，而直接显示所有项。virtual-scroll中的size参数代表组件每次渲染的行数，渲染的行数越少，性能表现越好。

下面，我们来看两个示例：

示例一：省市区三级联动选择器

我们在列表中显示省市区三级联动选择器时，由于区域数据量较大，渲染时可能会造成页面卡顿。使用vxe-list的虚拟滚动可以改善这个问题。

首先，在template的vxe-list标签上添加height和virtual-scroll参数：

<template>
  <vxe-list
    :height="300"
    :virtual-scroll="{size: 20}"
    ref="list"
    :data="data">
    静态列 
    <template v-slot="{ $row }">
      <vxe-cell>
        <vxe-form-item :prop="'province'+$row.rowid" :rules="rules" :class="{'item-error': errors['province'+$row.rowid]}">
          <vxe-select :span="24" v-model="data[$row.rowid].province"  placeholder="请选择省份" clearable :options="provinces" @change="changeProvince($event.target.value, $row.rowid)"></vxe-select>
        </vxe-form-item>
        <vxe-form-item :prop="'city'+$row.rowid" :rules="rules" :class="{'item-error': errors['city'+$row.rowid]}">
          <vxe-select :span="24" v-model="data[$row.rowid].city" placeholder="请选择城市" clearable :options="getCities($row.rowid)" @change="changeCity($event.target.value, $row.rowid)"></vxe-select>
        </vxe-form-item>
        <vxe-form-item :prop="'district'+$row.rowid" :rules="rules" :class="{'item-error': errors['district'+$row.rowid]}">
          <vxe-select :span="24" v-model="data[$row.rowid].district" placeholder="请选择区域" clearable :options="getDistricts($row.rowid)"></vxe-select>
        </vxe-form-item>
      </vxe-cell>
    </template>
  </vxe-list>
</template>

在data中，我们需要给每个省市区添加唯一的标识ID，而且这个ID必须连续，如下所示：

data: [
  { rowid: 0, province: '', city: '', district: '' },
  { rowid: 1, province: '', city: '', district: '' },
  { rowid: 2, province: '', city: '', district: '' },
  ...
]

接下来，我们需要为每个省份、城市和区域获取选项，在methods中添加如下方法：

methods: {
  // 计算各省份的城市选项
  getCities (index) {
    let item = this.data[index]
    let province = item.province
    return province ? highData[province] : []
  },
  // 计算各城市的区域选项
  getDistricts (index) {
    let item = this.data[index]
    let province = item.province
    let city = item.city
    return city ? middleData[province][city] : []
  }
}

此时，我们已经实现了虚拟列表选择器的三级联动，用户在选择省份时，系统会计算出省份下的城市选项列表，同时渲染到当前显示项前后的列表中。

示例二：通过接口获取大数据量列表

我们需要调用接口获取一个包含大量数据的列表，如数万行数据。为了避免性能问题，我们可以使用vxe-list的虚拟滚动来实现。

在data中，我们需要添加一个空数组，用于接收获取到的数据：

data: []

接下来，在mounted钩子中，我们可以通过$http.get()方法从后端接口获取数据并保存在data中，并设置height和virtual-scroll参数：

mounted () {
  this.getList()
},
methods: {
  async getList () {
    try {
      let { data } = await this.$http.get('/api/list')   // 获取数据
      this.data = data                                    // 将数据存到data中
      this.$nextTick(() => {
        // 定义每次加载多少条数据
        this.$refs.list.virtualScroll(parseInt(this.$refs.list.$el.clientHeight / this.$refs.list.calcRowHeight()))
      })
    } catch (e) {
      console.error(e)
    }
  }
}

注意，此处需要在this.$nextTick()回调函数中给vxe-list组件加载滚动事件。另外，calcRowHeight()也是需要的，它可以计算每行的高度并进行优化。

三、总结

本文介绍了如何使用vxe-list组件实现虚拟列表，提升大数据量时的性能表现，用户体验。我们通过两个示例，分别展示了省市区三级联动列表和从接口中加载大数据量列表。

在高负重的数据应用项目中，对列表组件的渲染性能常常是一个需要优化的问题。通过使用vxe-list组件和虚拟滚动，我们可以避免对用户的糟糕体验，同时保证加载和渲染大量数据的效率和速度。