vue给datagrid 填充数据

好的，下面是一个简单的示例，演示如何使用 Vue 给 DataGrid 填充数据：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 22, gender: '女' },
        { name: '王五', age: 25, gender: '男' },
      ]
    };
  }
};
</script>

在这个示例中，我们使用了 Element UI 提供的 DataGrid 组件 `el-table`，并使用 `data` 属性将数据 `tableData` 传递给组件。`tableData` 是一个数组，其中包含了三个对象，每个对象表示一条数据记录，包括姓名、年龄和性别三个属性。

在模板中，我们使用 `el-table-column` 组件来定义表格的列，通过 `prop` 属性指定了对应的数据属性，并使用 `label` 属性指定了列的标题。

需要注意的是，这只是一个简单的示例，实际使用中需要根据具体需求进行相应的调整和扩展。同时，这里使用的是 Element UI 的 DataGrid 组件，其他 DataGrid 组件的使用方式可能略有不同。