当前位置：首页 > VUE

vue实现表格组件封装

2026-01-21 07:44:05VUE

封装 Vue 表格组件的核心思路

封装一个可复用的 Vue 表格组件需要考虑数据驱动、配置化、扩展性等核心要素。以下是实现方案的关键点：

基础表格结构设计

使用 Vue 的 v-for 指令动态渲染表头和表格数据
通过 props 接收外部传入的表格配置和数据

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

组件参数定义

props: {
  // 表格列配置
  columns: {
    type: Array,
    required: true,
    default: () => []
  },
  // 表格数据
  data: {
    type: Array,
    required: true,
    default: () => []
  },
  // 是否显示边框
  border: {
    type: Boolean,
    default: false
  }
}

支持自定义列模板

通过作用域插槽实现自定义列内容渲染

vue实现表格组件封装

<template v-for="col in columns" #[col.prop]="{ row }">
  <slot :name="col.prop" :row="row">
    {{ row[col.prop] }}
  </slot>
</template>

添加排序功能

methods: {
  handleSort(col) {
    if (!col.sortable) return
    this.data.sort((a, b) => {
      return col.sortMethod 
        ? col.sortMethod(a[col.prop], b[col.prop])
        : a[col.prop] - b[col.prop]
    })
  }
}

实现分页功能

computed: {
  paginatedData() {
    const start = (this.currentPage - 1) * this.pageSize
    return this.data.slice(start, start + this.pageSize)
  }
}

完整组件示例

<template>
  <div class="table-container">
    <table :class="['custom-table', { 'has-border': border }]">
      <!-- 表头 -->
      <thead>
        <tr>
          <th 
            v-for="col in columns" 
            :key="col.prop"
            @click="handleSort(col)"
          >
            {{ col.label }}
            <span v-if="col.sortable" class="sort-icon">
              {{ sortOrder === 'asc' ? '↑' : '↓' }}
            </span>
          </th>
        </tr>
      </thead>

      <!-- 表格内容 -->
      <tbody>
        <tr v-for="(row, index) in paginatedData" :key="index">
          <td v-for="col in columns" :key="col.prop">
            <slot :name="col.prop" :row="row">
              {{ row[col.prop] }}
            </slot>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 分页器 -->
    <div v-if="showPagination" class="pagination">
      <button @click="prevPage">上一页</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SmartTable',
  props: {
    columns: Array,
    data: Array,
    border: Boolean,
    pageSize: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      currentPage: 1,
      sortOrder: 'asc'
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.data.length / this.pageSize)
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.data.slice(start, start + this.pageSize)
    },
    showPagination() {
      return this.data.length > this.pageSize
    }
  },
  methods: {
    handleSort(col) {
      if (!col.sortable) return
      this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'
      this.data.sort((a, b) => {
        return col.sortMethod 
          ? col.sortMethod(a[col.prop], b[col.prop])
          : this.sortOrder === 'asc' 
            ? a[col.prop] - b[col.prop]
            : b[col.prop] - a[col.prop]
      })
    },
    prevPage() {
      if (this.currentPage > 1) this.currentPage--
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++
    }
  }
}
</script>

组件使用示例

<template>
  <smart-table
    :columns="columns"
    :data="tableData"
    border
  >
    <template #status="{ row }">
      <span :class="['status', row.status]">
        {{ row.status }}
      </span>
    </template>
  </smart-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄', sortable: true },
        { prop: 'status', label: '状态' }
      ],
      tableData: [
        { name: '张三', age: 25, status: 'active' },
        { name: '李四', age: 30, status: 'inactive' }
      ]
    }
  }
}
</script>