Vue-Good-Table 表格全局配置详解

前言

Vue-Good-Table 是一个功能强大的 Vue 表格组件，提供了丰富的配置选项来满足各种业务场景需求。本文将深入解析表格的全局配置选项，帮助开发者更好地理解和使用这个组件。

基础配置

列配置 (columns)

列配置是表格的核心部分，通过数组形式定义表格的列结构。每个列对象包含多个可配置属性：

columns: [
  {
    label: '姓名',  // 表头显示文本
    field: 'name',  // 对应数据字段
    // 其他列配置...
  }
]

行数据 (rows)

行数据定义了表格要展示的内容，是一个对象数组：

rows: [
  {
    id: 1,
    name: "张三",
    age: 25
  },
  // 其他数据行...
]

对于分组行数据，需要使用嵌套格式，这在展示树形结构或分类数据时非常有用。

表格样式与布局

最大高度 (max-height)

通过设置 max-height 可以限制表格主体的最大高度，超出部分会出现滚动条：

<vue-good-table
  :columns="columns"
  :rows="rows"
  max-height="300px">
</vue-good-table>

固定表头 (fixed-header)

当表格内容较多需要滚动查看时，固定表头可以提升用户体验：

<vue-good-table
  :columns="columns"
  :rows="rows"
  max-height="200px"
  :fixed-header="true">
</vue-good-table>

最佳实践：固定表头通常需要与 max-height 配合使用，否则无法看到滚动效果。

行号显示 (line-numbers)

启用行号可以帮助用户快速定位数据行：

<vue-good-table
  :columns="columns"
  :rows="rows"
  :line-numbers="true">
</vue-good-table>

行样式类 (row-style-class)

可以为行添加自定义样式，支持字符串或函数形式：

methods: {
  rowStyleClassFn(row) {
    // 根据年龄返回不同样式类
    return row.age > 18 ? 'adult-row' : 'minor-row';
  }
}

从右到左布局 (rtl)

对于阿拉伯语等从右到左书写的语言，可以启用 RTL 模式：

<vue-good-table
  :columns="columns"
  :rows="rows"
  :rtl="true">
</vue-good-table>

功能插槽

表格操作区 (table-actions)

在表格顶部右侧添加自定义操作按钮：

<vue-good-table :columns="columns" :rows="rows">
  <div slot="table-actions">
    <button @click="exportData">导出数据</button>
    <button @click="printTable">打印表格</button>
  </div>
</vue-good-table>

表格底部操作区 (table-actions-bottom)

在表格底部添加操作区域：

<vue-good-table :columns="columns" :rows="rows">
  <div slot="table-actions-bottom">
    <button @click="loadMore">加载更多</button>
  </div>
</vue-good-table>

空状态提示 (emptystate)

自定义无数据时的展示内容：

<vue-good-table :columns="columns" :rows="rows">
  <div slot="emptystate">
    <img src="no-data.png" />
    <p>暂无数据，请稍后再试</p>
  </div>
</vue-good-table>

高级功能

远程模式 (mode)

当数据量很大时，可以使用远程模式将排序、筛选等操作交由服务器处理：

<vue-good-table
  :columns="columns"
  :rows="rows"
  mode="remote"
  @on-sort-change="handleSortChange"
  @on-filter-change="handleFilterChange">
</vue-good-table>

总记录数 (totalRecords)

在远程分页模式下，需要告知表格总记录数以正确显示分页信息：

data() {
  return {
    totalRecords: 0,
    // 其他数据...
  }
}

紧凑模式 (compactMode)

针对移动设备优化显示，在小屏幕下自动切换为列表视图：

<vue-good-table
  :columns="columns"
  :rows="rows"
  :compactMode="true">
</vue-good-table>

总结

Vue-Good-Table 提供了全面的表格配置选项，从基础的数据展示到高级的远程数据加载，再到移动端适配，几乎涵盖了所有常见的表格需求场景。通过合理组合这些配置，开发者可以轻松构建出功能丰富、用户体验良好的数据表格组件。

在实际项目中，建议根据具体需求选择合适的配置组合，例如：

• 大数据量场景：使用远程模式 + 分页
• 移动端应用：启用紧凑模式
• 国际化项目：考虑 RTL 支持
• 复杂交互：充分利用各种插槽扩展功能

掌握这些全局配置选项，将大大提升开发效率和数据展示效果。