一、背景与动机

在Vue.js项目中，Element UI的El-Table组件因其强大的功能和易用性，成为展示表格数据的首选。然而，随着项目复杂度的增加，直接使用El-Table可能面临以下问题：

1. 重复代码：多个页面中表格结构相似，但需重复编写列定义、分页逻辑等。
2. 高度自适应：表格需根据容器高度动态调整，避免固定高度导致的布局问题。
3. 功能扩展：如添加排序、筛选、导出等通用功能，需重复实现。

通过二次封装El-Table组件，可以统一处理这些问题，提升开发效率，降低维护成本。

二、二次封装的核心目标

1. 简化API：通过props和events暴露必要配置，隐藏内部实现细节。
2. 高度自适应：自动计算表格高度，适应不同屏幕尺寸。
3. 功能增强：集成排序、筛选、分页、导出等常用功能。
4. 可扩展性：支持自定义列、插槽等，满足个性化需求。

三、高度自适应的实现方案

1. 基于ResizeObserver的动态高度计算

ResizeObserver API可监听元素尺寸变化，实时调整表格高度。

import { ResizeObserver } from '@juggle/resize-observer';
export default {
  props: {
    maxHeight: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      tableHeight: 0,
      observer: null
    };
  },
  mounted() {
    this.initObserver();
  },
  beforeDestroy() {
    if (this.observer) {
      this.observer.disconnect();
    }
  },
  methods: {
    initObserver() {
      const container = this.$el.querySelector('.el-table');
      this.observer = new ResizeObserver(entries => {
        const { height } = entries[0].contentRect;
        this.tableHeight = this.maxHeight || height - 50; // 预留分页等空间
      });
      this.observer.observe(container);
    }
  }
};

2. 结合CSS的flex布局

通过flex布局确保表格容器自动填充剩余空间。

.table-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.el-table {
  flex: 1;
  overflow: auto;
}

3. 完整封装示例

<template>
  <div class="table-container">
    <el-table
      :data="data"
      :height="tableHeight"
      border
      style="width: 100%"
    >
      <el-table-column
        v-for="col in columns"
        :key="col.prop"
        :prop="col.prop"
        :label="col.label"
        :sortable="col.sortable"
      />
    </el-table>
    <el-pagination
      v-if="pagination"
      :total="total"
      :page-size="pageSize"
      @current-change="handlePageChange"
    />
  </div>
</template>
<script>
import { ResizeObserver } from '@juggle/resize-observer';
export default {
  name: 'AdaptiveTable',
  props: {
    data: Array,
    columns: Array,
    total: Number,
    pageSize: {
      type: Number,
      default: 10
    },
    pagination: {
      type: Boolean,
      default: true
    },
    maxHeight: Number
  },
  data() {
    return {
      tableHeight: 0,
      observer: null
    };
  },
  mounted() {
    this.initObserver();
  },
  beforeDestroy() {
    if (this.observer) {
      this.observer.disconnect();
    }
  },
  methods: {
    initObserver() {
      const container = this.$el.querySelector('.el-table');
      this.observer = new ResizeObserver(entries => {
        const { height } = entries[0].contentRect;
        this.tableHeight = this.maxHeight || height - 50;
      });
      this.observer.observe(container);
    },
    handlePageChange(page) {
      this.$emit('page-change', page);
    }
  }
};
</script>
<style scoped>
.table-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.el-pagination {
  margin-top: 10px;
  text-align: right;
}
</style>

四、功能增强与扩展

1. 排序与筛选

通过props传递排序和筛选配置：

props: {
  sortable: {
    type: Boolean,
    default: true
  },
  filterable: {
    type: Boolean,
    default: true
  }
}

在列定义中动态设置：

<el-table-column
  v-for="col in columns"
  :key="col.prop"
  :prop="col.prop"
  :label="col.label"
  :sortable="sortable && col.sortable"
  :filters="filterable ? col.filters : []"
  :filter-method="col.filterMethod"
/>

2. 导出功能

集成xlsx库实现导出：

import * as XLSX from 'xlsx';
methods: {
  exportExcel() {
    const ws = XLSX.utils.json_to_sheet(this.data);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    XLSX.writeFile(wb, 'table.xlsx');
  }
}

通过按钮触发：

<el-button @click="exportExcel">导出Excel</el-button>

3. 自定义插槽

支持自定义列内容：

<el-table-column label="操作">
  <template #default="{ row }">
    <slot name="action" :row="row">
      <el-button size="mini" @click="handleEdit(row)">编辑</el-button>
    </slot>
  </template>
</el-table-column>

五、最佳实践与注意事项

1. 性能优化：

   • 对大数据量表格启用虚拟滚动。
   • 避免在表格中直接使用复杂计算属性。

2. 响应式设计：

   • 确保父容器有明确的高度设置。
   • 在移动端考虑使用横向滚动。

3. 可访问性：

   • 为表格添加aria-label等属性。
   • 确保键盘导航可用。

4. TypeScript支持：

   • 为组件props和events添加类型定义。

interface Column {
  prop: string;
  label: string;
  sortable?: boolean;
  filters?: Array<{ text: string; value: string }>;
  filterMethod?: (value: any, row: any) => boolean;
}
export default defineComponent({
  props: {
    columns: {
      type: Array as PropType<Column[]>,
      required: true
    }
    // ...其他props
  }
});

六、总结与展望

通过二次封装El-Table组件，我们实现了：

1. 高度自适应：基于ResizeObserver和flex布局的动态高度计算。
2. 功能集成：排序、筛选、分页、导出等常用功能的一站式解决方案。
3. 可扩展性：通过props和插槽支持个性化定制。

未来可进一步探索：

• 与Vue 3的Composition API结合。
• 集成更复杂的数据可视化功能。
• 支持服务端排序和分页。

这种封装方式不仅提升了开发效率，也确保了项目间表格组件的一致性，是Vue.js项目中处理表格数据的理想方案。