在现代前端开发中，数据表格是展示和处理数据的核心组件。vxe-table 作为一款功能强大的 Vue 表格组件。本文将结合实际项目代码，详细介绍 vxe-table 的核心用法，帮助你快速掌握这个强大的工具。

什么是 vxe-table？

vxe-table 是一个基于 Vue 的高性能表格组件，提供了完整的数据展示、编辑、筛选、排序等功能，同时支持自定义模板和丰富的交互效果。它的设计理念是 "简洁易用、功能完备"，能够满足从简单表格到复杂数据管理界面的各种需求。

基础用法：快速上手

安装与引入

首先需要安装 vxe-table 组件库：

npm install vxe-table@4 xe-utils --save

在项目入口文件中引入并注册：

import { createApp } from 'vue'
import App from './App.vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

const app = createApp(App)
app.use(VXETable)
app.mount('#app')

基本结构

在组件中使用 vxe-table 最核心的标签是 <vxe-grid>，它是一个集成了表格、分页、工具栏等功能的高级组件。一个最基本的表格结构如下：

<vxe-grid ref="xGrid" v-bind="gridOptions">
  <!-- 自定义列模板 -->
</vxe-grid>

核心配置详解

vxe-table 的配置主要通过一个配置对象（通常命名为 gridOptions）来实现，让我们结合实际项目代码解析其核心配置项。

基础属性配置

const gridOptions = reactive({
  border: true, // 显示边框
  showHeaderOverflow: true, // 表头内容溢出时显示省略号
  showOverflow: true, // 单元格内容溢出时显示省略号
  loading: false, // 是否显示加载状态
  headerAlign: 'center', // 表头内容居中对齐
  resizable: true, // 允许调整列宽
  showBodyOverflow: true,
  cellConfig: {
    verticalAlign: 'center', // 单元格内容垂直居中
  },
  rowConfig: {
    isHover: true, // 鼠标悬停行时高亮
  },
  // 其他配置...
})

这些基础属性控制着表格的整体外观和基本行为，通过简单的布尔值或字符串设置，就能快速改变表格的样式。

列配置（columns）

columns 是表格最核心的配置，它定义了表格的列结构：

columns: [
  // 复选框列
  { type: 'checkbox', fixed: 'left', width: 50 },
  
  // 普通数据列
  { field: 'id', title: '合同编号', align: 'center', width: 120 },
  { field: 'name', title: '合同名称', align: 'center', width: 300 },
  
  // 自定义模板列
  {
    field: 'status',
    slots: { default: 'status_default' }, // 关联自定义模板
    title: '合同状态',
    align: 'center',
    width: 100,
  },
  
  // 操作列
  {
    field: 'operate',
    slots: { default: 'operate_default' },
    title: '操作',
    align: 'center',
    fixed: 'right', // 固定在右侧
    width: 300,
  }
]

列配置的关键属性：

• type：列类型，如 'checkbox' 表示复选框列
• field：对应数据中的字段名
• title：列标题
• align：对齐方式
• width：列宽度
• fixed：是否固定列（'left' 或 'right'）
• slots：配置自定义模板的插槽名

数据绑定

表格数据通过 gridOptions.data 进行绑定，通常从接口获取数据后直接赋值：

// 从接口获取数据后更新表格
const loadData = async () => {
  gridOptions.loading = true // 显示加载状态
  try {
    const res = await fetchDataAPI(params)
    gridOptions.data = res.rows // 绑定数据
  } finally {
    gridOptions.loading = false // 关闭加载状态
  }
}

自定义模板：让表格更灵活

vxe-table 允许通过插槽（slot）自定义单元格内容，这是其灵活性的重要体现。

状态列自定义

<template #status_default="{ row }">
  <p>{{ row.status === '1' ? '履约中' : '已完成' }}</p>
</template>

这里 status_default 对应 columns 配置中 slots.default 的值，{ row } 是插槽作用域，包含当前行的数据。通过这种方式，我们可以根据数据动态显示不同内容。

操作列自定义

<template #operate_default="{ row }">
  <al-button
    @click="openDetail(row, false)"
    :options="{ title: `详情`, type: 'text' }"
  ></al-button>
  <al-button
    @click="handleEdit(row)"
    :options="{ title: `变更`, type: 'text' }"
  ></al-button>
  <!-- 更多操作按钮 -->
</template>

操作列通常包含各种交互按钮，通过自定义模板可以轻松实现查看详情、编辑、删除等操作，并且可以直接绑定事件处理函数。

常用功能实现

复选框操作

vxe-table 提供了便捷的复选框操作 API，通过表格的 ref 引用可以获取选中的行：

// 获取选中的行
const selectRows = xGrid.value.getCheckboxRecords()

// 删除选中行示例
const handleDel = () => {
  const selectRows = xGrid.value.getCheckboxRecords()
  if (selectRows.length === 0) {
    ElMessage.warning('请先选择要删除的行')
  } else {
    const ids = selectRows.map(item => item.id) // 提取选中行的id
    // 调用删除接口...
  }
}

加载状态控制

通过 gridOptions.loading 属性可以控制表格的加载状态，在数据请求过程中显示加载动画：

const loadData = async () => {
  gridOptions.loading = true // 开始加载
  try {
    const res = await fetchDataAPI()
    gridOptions.data = res.rows
  } finally {
    gridOptions.loading = false // 无论成功失败都关闭加载
  }
}

实践技巧

1. 组件复用：将表格配置和常用方法封装成基础组件，在多个页面中复用
2. 性能优化：对于大数据量表格，可开启虚拟滚动（scroll-y 属性）
3. 按需引入：如果项目体积敏感，可以只引入需要的模块
4. 样式定制：通过 CSS 变量或自定义主题，使表格样式与项目风格统一

总结

vxe-table 凭借其丰富的功能和灵活的配置，为 Vue 项目提供了强大的数据表格解决方案。通过本文介绍的基础配置、列定义、自定义模板和常用功能，你可以快速构建出满足业务需求的表格组件。

无论是简单的数据展示还是复杂的交互场景，vxe-table 都能应对自如。建议结合官方文档（https://vxetable.cn/v4）深入学习更多高级功能，如单元格编辑、树形结构、导出等，让你的数据表格更加强大。