VUE table表格所有代码

以下是一个简单的 Vue 表格组件的代码示例：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in dataList" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "Table",
  props: {
    dataList: {
      type: Array,
      required: true
    }
  }
};
</script>

这个组件接收一个数组 `dataList` 作为数据源，并将数据渲染成表格。使用时只需要传入数据即可：

<template>
  <div>
    <Table :dataList="list" />
  </div>
</template>

<script>
import Table from "./Table.vue";

export default {
  name: "App",
  components: {
    Table
  },
  data() {
    return {
      list: [
        { name: "张三", age: 18, gender: "男" },
        { name: "李四", age: 20, gender: "女" },
        { name: "王五", age: 22, gender: "男" }
      ]
    };
  }
};
</script>

这个示例是一个简单的静态表格，如果需要实现动态的排序、分页、筛选等功能，需要使用一些第三方组件或自己编写相关的逻辑。