表格组件是我们在 components-library 中常用的一个基础组件。它可以帮助你以一种清晰、易于阅读的方式展示数据。

基本用法

表格组件的基本用法非常简单。以下是一个简单的示例：

标题 内容
第一行 第一列内容
第二行 第二列内容

属性

表格组件支持以下属性：

  • columns: 定义列的配置，包括标题、宽度等。
  • data: 绑定的数据数组，每个元素应为一个对象，对象的键对应列的标题。

高级功能

  • 排序: 通过为列设置 sortable 属性，可以启用列的排序功能。
  • 分页: 通过设置 pagination 属性，可以实现表格的分页功能。

示例代码

<template>
  <table-component :columns="columns" :data="data"></table-component>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '姓名', width: 100 },
        { title: '年龄', width: 100 },
        { title: '职业', width: 100 }
      ],
      data: [
        { name: '张三', age: 20, job: '工程师' },
        { name: '李四', age: 25, job: '设计师' }
      ]
    };
  }
};
</script>

更多关于表格组件的细节和示例，请查看我们的组件库文档.

图片示例

下面是一个表格组件的实际应用效果：

表格示例