el-table动态连数据表代码

当使用Element UI库中的el-table组件时，你可以通过动态绑定数据来实现动态连数据表。以下是一个示例代码：

<template>
  <el-table :data="tableData" border>
    <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>
</template>

<script>
export default {
  data() {
    return {
      tableData: [] // 初始化数据为空数组
    };
  },
  mounted() {
    this.fetchData(); // 在组件挂载完成后调用数据获取方法
  },
  methods: {
    fetchData() {
      // 模拟异步获取数据
      setTimeout(() => {
        this.tableData = [
          { name: "张三", age: 20, gender: "男" },
          { name: "李四", age: 25, gender: "女" },
          { name: "王五", age: 30, gender: "男" }
        ];
      }, 1000);
    }
  }
};
</script>

在上面的代码中，我们首先在`data`中定义了一个空数组`tableData`来存储表格的数据。然后，在`mounted`钩子函数中调用了`fetchData`方法，该方法用于模拟异步获取数据，并将获取到的数据赋值给`tableData`。最后，我们使用`el-table`组件来展示数据，并通过`:data`属性绑定了`tableData`。

请注意，上述代码只是一个简单的示例，你可以根据自己的需求进行修改和扩展。希望对你有所帮助！