数据表格

数据表格组件提供了强大的数据展示和管理功能，使用户能够高效处理大量数据。支持分页、排序、筛选、数据加载等功能，可以展示静态数据或通过接口动态加载数据，有助于实现复杂的数据管理和展示场景。

基础使用

获取表格数据

通过注入的 api.el 方法可以获取数据表格组件实例，访问表格数据：

function onChange($inject) {
    // 获取数据表格组件实例
    const dataTableInstance = $inject.api.el('ref_F2vulxvqc841dac');
    // 获取当前表格数据列表
    const list = dataTableInstance.list;
    console.log('当前表格数据:', list);

    // 获取总数
    const total = dataTableInstance.total;
    console.log('总数据量:', total);

    // 获取当前页码
    const currentPage = dataTableInstance.currentPage;
    console.log('当前页码:', currentPage);
}

获取表格DOM元素

通过 getEl 方法可以获取表格的DOM元素，进行更底层的操作：

function getTableElement($inject) {
    const dataTableInstance = $inject.api.el('ref_F2vulxvqc841dac');
    // 获取表格DOM元素
    const tableEl = dataTableInstance.getEl();
    console.log('表格元素:', tableEl);

    // 获取选中的行数据
    if (dataTableInstance.selection) {
        const selectedRows = tableEl.getSelectionRows();
        console.log('选中的行:', selectedRows);
    }
}

刷新表格数据

使用 initPage 方法可以重新初始化表格并刷新数据：

function refreshTable($inject) {
    const dataTableInstance = $inject.api.el('ref_F2vulxvqc841dac');
    // 重新初始化表格
    dataTableInstance.initPage();
}

切换页码

通过 changePage 方法可以程序化切换页码：

function goToPage($inject, pageNum) {
    const dataTableInstance = $inject.api.el('ref_F2vulxvqc841dac');
    // 切换到指定页码
    dataTableInstance.changePage(pageNum);
}

配置项

数据表格提供了丰富的配置选项，您可以通过在设计器中配置属性来自定义表格的行为和外观。

属性名	类型	默认值	必需	说明
column	Array	[]	否	表格列配置
globalDataKey	String, Object	-	否	全局数据键名
fetch	Object	-	否	数据获取配置
data	Array	[]	否	静态数据
button	Object	-	否	操作按钮配置
index	Boolean	-	否	是否显示序号列
selection	Boolean	-	否	是否显示选择列
page	Object	-	否	分页配置

重要说明：

• column：配置表格列的显示，包括列标题、字段名、宽度、对齐方式等
• globalDataKey：使用全局数据源时指定数据键名
• fetch：配置通过接口获取数据的相关参数，包括URL、请求方法等
• data：当不使用接口时，可以直接传入静态数据数组
• page：配置分页相关参数，包括每页条数、页码字段等

事件

数据表格提供了丰富的事件，方便您监听表格的各种状态变化并执行相应的处理。

事件名	参数	说明
sortChange	data	排序变化事件，当用户点击列标题进行排序时触发
handleClick	{name, key, scope, column}	按钮点击事件，当用户点击操作按钮时触发
currentChange	n	页码变化事件，当用户切换页码时触发
pageSizeChange	size	每页条数变化事件，当用户更改每页条数时触发

事件使用示例

监听排序变化：

function handleSortChange(data) {
    console.log('排序变化:', data);
    // data包含prop（字段名）和order（排序方向）
    const { prop, order } = data;
    console.log('排序字段:', prop);
    console.log('排序方向:', order);
}

监听按钮点击：

function handleClick({ name, key, scope, column }) {
    console.log('按钮名称:', name);
    console.log('按钮键值:', key);
    console.log('当前行数据:', scope.row);
    console.log('当前列数据:', column);

    // 根据按钮名称执行不同操作
    if (name === '编辑') {
        // 编辑逻辑
    } else if (name === '删除') {
        // 删除逻辑
    }
}

监听页码变化：

function handleCurrentChange(pageNum) {
    console.log('切换到的页码:', pageNum);
    // 可以在这里执行分页相关的逻辑
}

监听每页条数变化：

function handlePageSizeChange(size) {
    console.log('每页条数:', size);
    // 可以保存用户的偏好设置
}

方法

数据表格提供了多种方法，方便您进行程序化控制。

方法名	参数	说明	返回值
getEl	-	获取表格DOM元素	Element
deepGet	object, path, defaultValue	深度获取对象属性（内部使用）	any
initPage	-	初始化分页	-
btnProps	btn, scope	获取按钮属性（内部使用）	Object
getLimit	-	获取分页大小	Number
nextList	-	获取下一页数据（内部使用）	-
fetchData	page	获取数据（内部使用）	Promise
changePage	n	切换页码	-
changePageSize	size	切换每页条数	-
getPageSizes	-	获取分页大小选项	Array
makePage	-	创建分页组件（内部使用）	VNode
checkBtnShow	scope, btn	检查按钮显示（内部使用）	Boolean
makeButtonCol	-	创建操作列（内部使用）	VNode
makeColumn	col	创建表格列（内部使用）	VNode
makeTd	col, scope	创建表格单元格（内部使用）	VNode

方法使用示例

获取表格选中的行：

function getSelectedRows($inject) {
    const dataTableInstance = $inject.api.el('ref_F2vulxvqc841dac');
    const tableEl = dataTableInstance.getEl();

    if (dataTableInstance.selection) {
        const selectedRows = tableEl.getSelectionRows();
        console.log('选中的行:', selectedRows);
        return selectedRows;
    }
}

切换每页条数：

function changePageSize($inject, size) {
    const dataTableInstance = $inject.api.el('ref_F2vulxvqc841dac');
    // 切换到指定的每页条数
    dataTableInstance.changePageSize(size);
}

获取当前页码：

function getCurrentPage($inject) {
    const dataTableInstance = $inject.api.el('ref_F2vulxvqc841dac');
    console.log('当前页码:', dataTableInstance.currentPage);
    console.log('每页条数:', dataTableInstance.getLimit());
}

Data

数据表格的内部数据属性如下：

数据名	初始值	说明
total	0	总数据量
loading	false	加载状态
unwatch	null	监听器清理函数
list	[]	当前页数据
currentPage	1	当前页码
id	1	组件刷新标识
order	''	排序字段
orderBy	''	排序方式
currentSize	undefined	当前每页条数
filterList	Array	过滤后的数据列表

数据说明：

• total：数据的总条数，用于分页计算
• loading：表格的加载状态，在数据加载时显示加载动画
• unwatch：数据监听器的清理函数，用于取消监听
• list：当前页面显示的数据列表
• currentPage：当前所在的页码，从1开始
• id：组件的刷新标识，用于强制重新渲染组件
• order：当前排序的字段名
• orderBy：排序方向，可能是 'ASC' 或 'DESC'
• currentSize：用户自定义的每页条数
• filterList：经过列过滤后的数据列表