移动端 vue table 组件简单封装

<template>
  <div class="table-wrapper">
    <table>
      <thead>
        <tr>
          <th v-for="header in headers" :key="header">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :key="row.id">
          <td v-for="key in rowKeys" :key="key">{{ row[key] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
 
<script>
export default {
  name: 'SimpleTable',
  props: {
    headers: {
      type: Array,
      required: true
    },
    rows: {
      type: Array,
      required: true
    },
    rowKeys: {
      type: Array,
      required: true
    }
  }
}
</script>
 
<style scoped>
.table-wrapper {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
</style>

这个简单的例子展示了如何在Vue中封装一个移动端友好的表格组件。组件接受三个props：headers、rows和rowKeys，分别用于定义表格头部和数据行的列名和数据。通过CSS样式，表格在移动端上也能保持良好的显示效果。