使用vxe-table实现表格虚拟滚动

业务背景

一个超大数据量的表格，并需要支持输入、选择等交互功能。

技术实现

• 使用vue2.x的 el-table，当超过 1000 条数据记录时，就会出现卡顿等性能问题，体验感比较差。
• 改用element-plus的Virtualized Table 虚拟化表格，但我的表格中需要输入、下拉、单选等各种功能，时间有限
• 最后选择了vxe-table，发现非常符合我的需求，同时支持element组件，开发起来方便，集成的功能也更全面

vxe-table文档地址

Vxe Table

使用方式

• 安装

npm install vxe-table@next
# 或者
yarn add vxe-table@next

• main.js引入

import VxeTable from 'vxe-table'
import 'vxe-table/lib/style.css'
app.use(VxeTable)

• 组件中使用

<vxe-table
    border
    round
    stripe
    height="600"
    :scroll-y="{enabled: true, gt: 0}"
    :edit-config="{mode: 'row', trigger: 'click'}"
    :row-class-name="disabledRow"
    :data="tableData"
    class="tableContent"
  >
    <vxe-column
      v-for="column in tableColumns"
      :title="column.label"
      :field="column.prop"
      :width="column.width"
      :edit-render="column.editRender"
      :visible="column.visible"
    >
      <!-- 个性化配置header -->
      <template #header>
        <span>{{ column.label }}</span>
        <el-input v-if="column.type!='action'" v-model="filterData[column.prop]" placeholder="请输入查询条件" @blur="filterTableData" @keyup.enter="filterTableData" clearable></el-input>
      </template>
      <!-- 自定义单元格，文本框 -->
      <template v-if="column.type=='input'" #edit="{ row }">
        <el-input v-model="row[column.prop]" clearable></el-input>
      </template>
      <!-- 自定义单元格，下拉框 -->
      <template v-if="column.type=='select'" #edit="{ row }">
        <el-select v-model="row[column.prop]">
          <el-option
            v-for="item in column.options"
            :key="item"
            :value="item"
            :label="item"
          >
          </el-option>
        </el-select>
      </template>
      <!-- 自定义单元格，默认值 -->
      <template v-if="column.type=='action'" #default="{ row }">
        <el-radio-group v-model="row.reviewStatus" @change="handleReviewNext">
          <el-radio label="1">确认</el-radio>
          <el-radio label="2">删除</el-radio>
        </el-radio-group>
      </template>
    </vxe-column>
  </vxe-table>

当有大量数据渲染的时候，可以开启纵向虚拟滚动，给表格设置scrollY属性

scrollY: {
  enabled: true,
  gt: 0
},

表格支持编辑，可使用插槽式

<template #edit="{ row }">
  <el-input v-model="row.nickname"></el-input>
</template>
<template #edit="{ row }">
  <el-select v-model="row.sex">
     <el-option v-for="item in sexOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
   </el-select>
 </template>

同时input设置需要获取焦点的页面元素

editRender: { autofocus: '.el-input__inner' }

遇到问题

1、在开发过程中，select选中下拉框的值后，页面不同步更新

• 需要再安装插件 @vxe-ui/plugin-render-element，该插件提供了在表格中渲染第三方组件，用于兼容 element-plus 组件库
• 安装方式

npm install @vxe-ui/plugin-render-element
# 或者
yarn add @vxe-ui/plugin-render-element

• main.js引入

import VxeUIPluginRenderElement from '@vxe-ui/plugin-render-element'
import '@vxe-ui/plugin-render-element/dist/style.css'
VxeUI.use(VxeUIPluginRenderElement)

安装这个之后就好用了。
2、vxe-column不能渲染动态数据，比如说，我的某些列在一定条件下才展示，某些条件下不展示，我设置了tableColumns为计算属性，再根据不同的条件判断，返回不同的list，但是不生效，最终通过设置visible:true|false来显隐对应的列
3、开启了纵向虚拟滚动后，表格内容不会自动换行，超出会…隐藏，于是给表格内容添加了tooltip提示，配置后，样式展示不对，排查了很久，发现只是css没有引入，一定要引入vxe-pc-ui/lib/style.css

import 'vxe-pc-ui/lib/style.css'

 <vxe-table
  :tooltip-config="tooltipConfig"
 >

const tooltipConfig = reactive({  
    showAll: true,  
    enterable: true,  
    contentMethod: ({ type, column, row, items, _columnIndex }) => {  
      const { field } = column;  
      // 定义需要显示提示的字段列表  
      const fieldsToShowTooltip = ['originalContent', 'expandedContent'];   
      return fieldsToShowTooltip.includes(field) ? row[field] || '' : '';   
    }  
});