vxe-grid 表格显示数据

要使用 vxe-grid 表格来显示数据，你需要按照以下步骤进行操作：

1. 首先，在你的项目中安装 vxe-table 包。你可以使用 npm 或 yarn 命令行工具来安装它。例如，运行以下命令来安装 vxe-table：

   npm install vxe-table

2. 在你的代码中引入 vxe-grid 组件。你可以在需要使用的组件中添加以下代码：

   import 'vxe-table/lib/style.css'
   import { Grid } from 'vxe-table'

   export default {
     components: {
       'vxe-grid': Grid
     },
     // ...
   }

3. 在模板中使用 vxe-grid 组件来显示数据。你可以在模板中添加以下代码：

   <vxe-grid :data="tableData" :columns="tableColumns"></vxe-grid>

上面的代码中，`tableData` 是你的数据数组，`tableColumns` 是你的列配置数组。你需要根据你的实际数据和列配置进行相应的调整。

4. 在你的 Vue 实例中，定义 `tableData` 和 `tableColumns` 数据。`tableData` 是一个包含你的表格数据的数组，而 `tableColumns` 则是一个包含列配置的数组。例如：

   export default {
     data() {
       return {
         tableData: [
           { id: 1, name: 'John Doe', age: 25 },
           { id: 2, name: 'Jane Smith', age: 30 },
           // ...
         ],
         tableColumns: [
           { field: 'id', title: 'ID' },
           { field: 'name', title: 'Name' },
           { field: 'age', title: 'Age' },
           // ...
         ]
       }
     },
     // ...
   }

上面的代码中，`tableData` 数组中的每个对象代表一行数据，而 `tableColumns` 数组中的每个对象定义了每列的字段和标题。

以上就是使用 vxe-grid 表格来显示数据的基本步骤。你可以根据 vxe-table 的文档进一步了解和调整表格的功能和样式。