当前位置：首页 > VUE

vue实现单表

2026-03-30 13:24:09VUE

Vue 实现单表的方法

在Vue中实现单表（单个表格）可以通过多种方式完成，通常结合Vue的数据绑定和组件化特性。以下是几种常见的方法：

使用原生HTML表格

通过Vue的数据绑定，可以动态渲染表格内容。定义一个数据数组，使用v-for指令循环渲染表格行。

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.job }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, job: '工程师' },
        { name: '李四', age: 30, job: '设计师' },
        { name: '王五', age: 28, job: '产品经理' }
      ]
    }
  }
}
</script>

使用第三方表格组件库

许多第三方库（如Element UI、Ant Design Vue等）提供了功能丰富的表格组件，支持排序、分页、筛选等高级功能。

以Element UI为例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="age" label="年龄" width="180"></el-table-column>
    <el-table-column prop="job" label="职业"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, job: '工程师' },
        { name: '李四', age: 30, job: '设计师' },
        { name: '王五', age: 28, job: '产品经理' }
      ]
    }
  }
}
</script>

动态表格列

如果需要动态生成表格列，可以通过计算属性或方法动态渲染列。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(column, index) in columns" :key="index">{{ column.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, rowIndex) in tableData" :key="rowIndex">
        <td v-for="(column, colIndex) in columns" :key="colIndex">{{ item[column.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '姓名', key: 'name' },
        { title: '年龄', key: 'age' },
        { title: '职业', key: 'job' }
      ],
      tableData: [
        { name: '张三', age: 25, job: '工程师' },
        { name: '李四', age: 30, job: '设计师' },
        { name: '王五', age: 28, job: '产品经理' }
      ]
    }
  }
}
</script>

表格分页

对于大量数据，可以结合分页组件实现分页功能。

vue实现单表

<template>
  <div>
    <el-table :data="currentTableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="age" label="年龄" width="180"></el-table-column>
      <el-table-column prop="job" label="职业"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="tableData.length"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, job: '工程师' },
        { name: '李四', age: 30, job: '设计师' },
        { name: '王五', age: 28, job: '产品经理' }
      ],
      currentPage: 1,
      pageSize: 2
    }
  },
  computed: {
    currentTableData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.tableData.slice(start, end)
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>