共10条数据。设置好相隔宽度，自动适应屏幕，先用死数据。最后在底部，生成elementUI的分页

好的，您想了解的是关于前端开发的问题吧。那么，针对您的问题，我可以给您一些指导：

首先，您可以使用Element UI的表格组件来展示您的数据，并设置表格的宽度为自适应屏幕。在表格中，您可以设置每列的宽度，使得各列之间有相隔宽度。

以下是一个简单的示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名" width="100"></el-table-column>
    <el-table-column prop="age" label="年龄" width="100"></el-table-column>
    <el-table-column prop="gender" label="性别" width="100"></el-table-column>
    <el-table-column prop="address" label="地址" width="200"></el-table-column>
    <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "张三",
          age: 25,
          gender: "男",
          address: "北京市海淀区",
          email: "zhangsan@example.com"
        },
        // 其他数据...
      ]
    };
  }
};
</script>

然后，您可以使用Element UI的分页组件来实现分页功能。您可以在表格下方添加分页组件，并设置每页显示的数据条数、总条数等参数。在用户点击分页按钮时，您可以通过调用API获取对应页数的数据，并更新表格数据。

以下是一个简单的示例代码：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <!-- 表格列定义... -->
    </el-table>
    <el-pagination
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      total: 100,
      pageSize: 10,
      currentPage: 1
    };
  },
  methods: {
    handlePageChange(newPage) {
      // 调用API获取对应页数的数据
      // 更新表格数据
      // ...
    }
  }
};
</script>

当然，以上只是一个简单的示例代码，您可以根据您的具体需求进行修改和扩展。希望能对您有所帮助！