vue实现表格组件封装

封装表格组件的核心思路

Vue中封装表格组件需要考虑数据驱动、可配置性和扩展性。通过props传递配置和数据，利用插槽（slot）实现内容定制化。

基础表格封装

创建可复用的表格组件需定义基本结构：

<template>
  <table class="base-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>

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

支持动态列配置

通过columns配置实现灵活的表头定义：

columns: [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { prop: 'address', label: '地址' }
]

添加插槽支持

使用作用域插槽实现单元格内容自定义：

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

调用时可覆盖特定列的内容：

<base-table :data="tableData" :columns="columns">
  <template #name="{ row }">
    <a @click="handleClick(row)">{{ row.name }}</a>
  </template>
</base-table>

添加排序功能

实现客户端排序功能：

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

分页功能集成

通过组合分页组件实现完整表格功能：

<div class="table-container">
  <base-table :data="currentPageData" />
  <base-pagination 
    :total="total"
    @page-change="handlePageChange"
  />
</div>

性能优化建议

对于大数据量场景使用虚拟滚动：

import VirtualScroller from 'vue-virtual-scroller'
Vue.use(VirtualScroller)

完整组件示例

export default {
  props: {
    data: Array,
    columns: Array,
    pagination: Object
  },
  data() {
    return {
      currentSort: { prop: '', order: '' }
    }
  },
  computed: {
    processedData() {
      // 处理排序和分页逻辑
    }
  },
  methods: {
    handleSort(col) {
      // 排序逻辑实现
    }
  }
}

样式处理建议

使用CSS变量实现主题定制：

.base-table {
  --table-border-color: #ebeef5;
  --table-header-bg: #f5f7fa;
}

.base-table th {
  background: var(--table-header-bg);
}

这种封装方式提供了良好的灵活性和可维护性，可以根据项目需求进一步扩展功能如筛选、行选择等。