通过data填充el-table

在Element UI的表格组件`el-table`中，填充数据通常是通过双向绑定或者数组的方式实现的。首先，你需要创建一个包含数据的数组，每个元素都代表表格的一行。假设我们有一个用户列表：

// 定义用户数据
let users = [
  { name: '张三', age: 20, email: 'zhangsan@example.com' },
  { name: '李四', age: 25, email: 'lisi@example.com' },
  // 更多用户...
];

// 或者从API获取动态数据
async function fetchData() {
  const response = await axios.get('/api/users');
  this.users = response.data;
}

// 初始化表格
new Vue({
  el: '#app',
  data: {
    users,
  },
  methods: {
    fetchData,
  },
  created() {
    this.fetchData();
  },
  // 使用v-for遍历users数组并渲染每一行
  <template>
    <el-table :data="users">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
    </el-table>
  </template>
})

在这个例子中，`:data`属性将Vue实例的数据绑定到表格上，`<el-table-column>`标签用于定义表头。每当`users`数据发生变化时，`el-table`会自动更新显示。