从入门到精通：用VxeTable重构你的Ant Design表格

引言

使用ant-table的时候，你是否感到力不从心，xx xx xxx 咳咳，进入正文：
在前端开发中，表格组件是后台管理系统的核心。Ant Design的Table虽然好用，但在处理大量数据时性能稍显不足。VxeTable以其轻量、高性能和丰富的功能脱颖而出。本文将带你快速掌握如何将Ant Design Table升级为VxeTable，并提供关键代码示例，助你轻松完成迁移。

一、快速上手：安装与引入

首先，安装VxeTable并引入到项目中。

npm install vxe-table

在main.js中全局引入：

import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

Vue.use(VXETable)

关键点：

• 只需安装vxe-table，样式文件也要引入。
• 全局注册后，可以在任何组件中使用vxe-grid。

二、核心替换：从a-table到vxe-grid

将原有的a-table替换为vxe-grid，并配置基本属性。

<template>
  <vxe-grid v-bind="gridOptions"></vxe-grid>
</template>

<script>
export default {
  data() {
    return {
      gridOptions: {
        border: true, // 显示边框
        columns: [
          { type: 'seq', width: 60 }, // 序号列
          { field: 'name', title: '姓名' },
          { field: 'age', title: '年龄' },
          { field: 'role', title: '角色' }
        ],
        data: [
          { id: 1, name: '张三', age: 25, role: '开发' },
          { id: 2, name: '李四', age: 30, role: '测试' }
        ]
      }
    }
  }
}
</script>

关键点：

• vxe-grid是VxeTable的核心组件。
• columns定义列信息，data绑定表格数据。
• border: true让表格更美观。

三、插槽改造：自定义列内容

VxeTable支持通过插槽自定义列内容，替换原有的scopedSlots。

<template v-slot:name="{ row }">
  <span style="color: blue;">{{ row.name }}</span>
</template>

关键点：

• 使用v-slot语法，作用域参数为row。
• 可以在插槽中使用任意Vue模板代码。

四、分页配置：轻松实现分页

VxeTable的分页功能非常强大，配置简单。

<template>
  <vxe-grid v-bind="gridOptions">
    <template #pager>
      <vxe-pager
        :current-page.sync="gridOptions.pagerConfig.currentPage"
        :page-size.sync="gridOptions.pagerConfig.pageSize"
        :total="gridOptions.pagerConfig.total"
        @page-change="handlePageChange"
      ></vxe-pager>
    </template>
  </vxe-grid>
</template>

<script>
export default {
  data() {
    return {
      gridOptions: {
        pagerConfig: {
          currentPage: 1,
          pageSize: 10,
          total: 50
        }
      }
    }
  },
  methods: {
    handlePageChange({ currentPage, pageSize }) {
      console.log('分页变化：', currentPage, pageSize)
    }
  }
}
</script>

关键点：

• pagerConfig配置分页参数。
• @page-change监听分页变化事件。
• 分页器通过#pager插槽插入。

五、动态列配置：用户自定义列

VxeTable支持动态列配置，用户可以自由调整列的显示与隐藏。

export default {
  data() {
    return {
      gridOptions: {
        toolbarConfig: {
          custom: true // 开启自定义列按钮
        },
        customConfig: {
          storage: true, // 开启本地存储
          restoreStore: this.loadColumns, // 加载列配置
          updateStore: this.saveColumns // 保存列配置
        }
      }
    }
  },
  methods: {
    loadColumns() {
      return Promise.resolve({}) // 模拟加载列配置
    },
    saveColumns({ storeData }) {
      console.log('保存列配置：', storeData)
      return Promise.resolve()
    }
  }
}

关键点：

• toolbarConfig.custom开启自定义列按钮。
• customConfig.storage开启本地存储，记住用户设置。
• restoreStore和updateStore分别用于加载和保存列配置。

六、性能优化：大数据量渲染

VxeTable在处理大数据量时表现优异，只需简单配置即可。

export default {
  data() {
    return {
      gridOptions: {
        height: 600, // 固定高度
        scrollX: { enabled: true }, // 开启横向滚动
        scrollY: { enabled: true } // 开启纵向滚动
      }
    }
  }
}

关键点：

• height设置表格高度，避免页面抖动。
• scrollX和scrollY开启滚动条，支持大数据量渲染。

这里是飞鱼爱吃米，只授渔，不授鱼！
最后，祝大家少写 Bug，多拿奖金！