当前位置：首页 > VUE

vue表格组件实现

2026-02-11 08:32:34VUE

Vue表格组件的实现方法

使用Element UI的el-table组件

安装Element UI库后，可以直接使用其表格组件。el-table提供了丰富的功能，包括排序、筛选、分页等。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: '李小狼', address: '上海市普陀区金沙江路 1517 弄' }
      ]
    }
  }
}
</script>

使用VxeTable实现高级表格

VxeTable是一个功能更强大的Vue表格组件，支持虚拟滚动、树形表格、导出Excel等功能。

<template>
  <vxe-table :data="tableData">
    <vxe-column type="seq" width="60"></vxe-column>
    <vxe-column field="name" title="姓名"></vxe-column>
    <vxe-column field="age" title="年龄"></vxe-column>
  </vxe-table>
</template>

<script>
import VxeTable from 'vxe-table'
import 'vxe-table/lib/style.css'

export default {
  components: { VxeTable },
  data() {
    return {
      tableData: [
        { name: '张三', age: 28 },
        { name: '李四', age: 32 }
      ]
    }
  }
}
</script>

自定义表格组件

对于简单需求，可以自己实现一个基础表格组件。创建一个可复用的Table组件，通过props接收数据和列配置。

<!-- Table.vue -->
<template>
  <table class="custom-table">
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.key">{{ column.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="index">
        <td v-for="column in columns" :key="column.key">{{ row[column.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: Array,
    columns: Array
  }
}
</script>

<style>
.custom-table {
  width: 100%;
  border-collapse: collapse;
}
.custom-table th, .custom-table td {
  border: 1px solid #ddd;
  padding: 8px;
}
</style>

实现表格分页功能

为表格添加分页功能，可以使用Element UI的el-pagination组件配合el-table使用。

<template>
  <div>
    <el-table :data="currentTableData" style="width: 100%">
      <!-- 表格列定义 -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 所有数据
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  computed: {
    currentTableData() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      )
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

实现表格排序功能

为表格添加排序功能，可以利用el-table的sortable属性或自定义排序方法。

<template>
  <el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange">
    <el-table-column prop="date" label="日期" sortable width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    handleSortChange({ column, prop, order }) {
      this.tableData.sort((a, b) => {
        if (order === 'ascending') {
          return a[prop] > b[prop] ? 1 : -1
        } else {
          return a[prop] < b[prop] ? 1 : -1
        }
      })
    }
  }
}
</script>

vue表格组件实现