vue实现移动端table

在移动端实现table可以使用Vue.js结合CSS来实现。以下是一个简单的示例：

1. 首先，需要在Vue实例中定义一个数据数组，用于存储表格中的数据。

data() {
  return {
    tableData: [
      { id: 1, name: 'Tom', age: 20 },
      { id: 2, name: 'Jerry', age: 22 },
      { id: 3, name: 'Lucy', age: 18 }
    ]
  }
}

2. 在模板中使用v-for指令循环渲染表格行，并使用v-bind指令绑定数据。

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in tableData" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </tbody>
</table>

3. 使用CSS设置表格的样式，以适应移动端屏幕大小。

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  background-color: #f2f2f2;
  text-align: left;
  padding: 8px;
  font-weight: bold;
}

td {
  border-bottom: 1px solid #ddd;
  text-align: left;
  padding: 8px;
}

以上就是一个简单的移动端table实现方法。你可以根据自己的需求进一步修改样式或添加功能。