vue封装原生table表格方法

在Vue中，你可以通过自定义组件来封装表格(table)的功能。以下是一个简单的示例，展示了如何封装一个基本的表格组件。

<template>
  <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="cell in row" :key="cell.id">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>
 
<script>
export default {
  name: 'SimpleTable',
  props: {
    headers: {
      type: Array,
      required: true
    },
    rows: {
      type: Array,
      required: true
    }
  }
};
</script>

使用该组件时，你需要传入headers和rows属性：

<template>
  <SimpleTable :headers="['Name', 'Age', 'Email']" :rows="tableData"/>
</template>
 
<script>
import SimpleTable from './SimpleTable.vue';
 
export default {
  components: {
    SimpleTable
  },
  data() {
    return {
      tableData: [
        ['John Doe', 30, 'john@example.com'],
        ['Jane Smith', 25, 'jane@example.com']
        // ... more rows
      ]
    };
  }
};
</script>

这个简单的组件只是基本的封装，你可以根据需要添加更多的功能，比如排序、筛选、分页等。