Vuetable-2 表格组件属性详解

Vuetable-2 表格组件属性详解

Vuetable-2 是一个基于 Vue.js 的强大表格组件，提供了丰富的功能来展示和处理表格数据。本文将全面解析 Vuetable-2 的各项属性配置，帮助开发者更好地理解和使用这个组件。

核心数据属性

api-mode 属性

api-mode 是 Vuetable-2 的核心属性之一，决定了组件如何获取数据：

• 类型：Boolean
• 默认值：true
• 说明：
  • 当设置为 true 时（默认），组件会从 api-url 指定的 API 端点自动请求数据
  • 当设置为 false 时，需要通过 data 属性手动提供数据
  • 注意：禁用 api-mode 会同时禁用分页、排序和筛选功能

最佳实践建议：除非有特殊需求，否则建议保持 api-mode 为 true，让数据库处理大数据集比在前端处理更高效。

api-url 属性

• 类型：String
• 默认值：空字符串
• 说明：指定 API 端点的 URL，组件将通过此 URL 与服务器交互

data 属性

• 类型：Array 或 Object
• 默认值：null
• 说明：
  • 当 api-mode 为 false 时，用于提供表格渲染数据
  • 从 v1.7 开始，如果提供符合特定结构的对象数据，仍可使用分页功能

数据路径配置

data-path 属性

• 类型：String
• 默认值："data"
• 说明：指定数据在响应结构中的路径。如果数据位于根层级，可设为空字符串

pagination-path 属性

• 类型：String
• 默认值："links.pagination"
• 说明：指定分页信息在响应结构中的路径。若无分页信息，应设为空字符串以避免警告

请求配置

http-method 属性

• 类型：String
• 默认值："get"
• 有效值："get" 或 "post"（必须小写）
• 说明：指定与服务器交互使用的 HTTP 方法

http-options 属性

• 类型：Object
• 默认值：空对象
• 说明：允许传递额外的 AJAX 请求选项

http-fetch 属性（v1.7+）

• 类型：Function
• 默认值：null
• 说明：
  • 允许指定自定义的 HTTP 请求函数
  • 若未指定，组件默认使用 axios
  • 函数需返回 Promise 对象

排序功能

sort-order 属性

• 类型：Array
• 默认值：空数组
• 说明：指定默认的排序规则

multi-sort 属性

• 类型：Boolean
• 默认值：false
• 说明：启用多列排序功能

multi-sort-key 属性

• 类型：String
• 默认值："alt"
• 有效值："alt", "ctrl", "shift", "meta"
• 说明：指定触发多列排序的修饰键

分页配置

per-page 属性

• 类型：Number
• 默认值：10
• 说明：指定每页显示的数据条数

initial-page 属性（v1.7+）

• 类型：Number
• 默认值：1
• 说明：指定初始加载的页码

样式定制

css 属性

• 类型：Object
• 默认值包含多个样式类：
  • tableClass: 表格基础样式
  • loadingClass: 加载状态样式
  • ascendingIcon/descendingIcon: 排序图标样式
  • detailRowClass: 详情行样式
  • handleIcon: 操作列图标样式
  • sortableIcon: 可排序列图标样式
• 说明：用于覆盖组件默认样式

render-icon 属性

• 类型：Function
• 默认值：null
• 说明：自定义图标渲染函数，可用于替换默认的 Semantic UI 图标

行相关属性

row-class 属性

• 类型：String 或 Function
• 默认值：空字符串
• 说明：
  • 可指定应用于每行的 CSS 类名
  • 若为函数，会接收行数据和索引作为参数，返回类名字符串

detail-row-component 属性

• 类型：String
• 默认值：空字符串
• 说明：指定用作详情行内容的组件名称

track-by 属性

• 类型：String
• 默认值："id"
• 说明：用于唯一标识每行的键名，对详情行和复选框功能至关重要

其他实用属性

min-rows 属性

• 类型：Number
• 默认值：0
• 说明：指定表格显示的最小行数，不足时会补空行

table-height 属性

• 类型：String
• 默认值：null
• 说明：设置固定表头表格的高度，超出高度时表格体可滚动

no-data-template 属性

• 类型：String
• 默认值：空字符串
• 说明：无数据时显示的模板内容

总结

Vuetable-2 提供了丰富的属性配置，可以满足各种表格展示需求。通过合理配置这些属性，开发者可以轻松实现：

• 从 API 自动获取数据或手动提供数据
• 灵活的分页和排序功能
• 高度自定义的表格样式
• 详情行等高级功能

理解这些属性的作用和配置方式，将帮助您更高效地使用 Vuetable-2 构建功能强大的表格应用。