xtf-table

组件说明

xtf-table 是面向业务数据的表格组件，适用于订单、库存和组织数据。支持排序、筛选、选择、分页、树表、远程数据、虚拟滚动、可编辑单元格及列配置。

基础用法

1. 基础列

vue

<template>
  <xtf-table :data="rows" :columns="columns" row-key="id" @row-click="rowClick" />
</template>
<script>
export default {
  data() {
    return {
      columns: [
        { title: '名称', dataIndex: 'name' },
        { title: '数量', dataIndex: 'count' }
      ],
      rows: [{ id: 1, name: '商品 A', count: 12 }]
    }
  },
  methods: {
    rowClick(p) {
      console.log(p.row)
    }
  }
}
</script>

2. 选择与分页

vue

<template>
  <xtf-table
    :data="rows"
    :columns="columns"
    selectable
    :selected-row-keys="keys"
    :page="page"
    :page-size="2"
    show-pagination
    @update:selectedRowKeys="keys = $event"
    @page-change="page = $event.page"
  />
</template>
<script>
export default {
  data() {
    return {
      page: 1,
      keys: [],
      columns: [{ title: '名称', dataIndex: 'name' }],
      rows: [
        { id: 1, name: 'A' },
        { id: 2, name: 'B' },
        { id: 3, name: 'C' }
      ]
    }
  }
}
</script>

3. 单元格插槽与编辑

vue

<template>
  <xtf-table :data="rows" :columns="columns" @cell-edit="edit">
    <template #col-stock="{ row }"><xtf-tag :label="String(row.stock)" theme="success" /></template>
  </xtf-table>
</template>
<script>
export default {
  data() {
    return {
      columns: [{ title: '库存', key: 'stock', dataIndex: 'stock', editable: true }],
      rows: [{ id: 1, stock: 20 }]
    }
  },
  methods: {
    edit(p) {
      this.rows[0].stock = p.newValue
      console.log(p)
    }
  }
}
</script>

4. 树表

vue

<template><xtf-table :data="rows" :columns="columns" tree-data default-expand-all /></template>
<script>
export default {
  data() {
    return {
      columns: [{ title: '部门', dataIndex: 'name' }],
      rows: [{ id: 1, name: '运营部', children: [{ id: 2, name: '内容组' }] }]
    }
  }
}
</script>

--- ## 全部属性 | 属性 | 类型 | 默认值 | 作用描述 | 适用范围 | |---|---|---|---|---| | `columns` /
`data` / `rowKey` | `Array/Array/String` | `[]/[]/'id'` | 列、行及主键字段 | 基础表格 | | `stripe` /
`border` / `stickyHeader` | `Boolean/String/Boolean` | `false/'horizontal'/false` |
斑马纹、`horizontal/all/none` 边框、吸顶表头 | 展示 | | `loading` / `skeletonRows` |
`Boolean/Number` | `false/4` | 加载骨架 | 加载态 | | `fixedLeft` / `minWidth` | `Boolean/String \|
Number` | `false/''` | 首列固定、最小宽度 | 宽表 | | `emptyTitle` / `emptyDesc` | `String` | `''` |
空态文案 | 空数据 | | `defaultSortKey` / `defaultSortOrder` | `String` | `''` | 初始排序 | 排序 | |
`selectable` / `selectedRowKeys` / `selectOnRowClick` / `selectionColumnWidth` / `selectAllMode` |
`Boolean/Array/Boolean/String \| Number/String` | `false/[]/false/88/'page'` | 选择相关配置 | 多选 |
| `expandable` / `expandColumnWidth` / `expandedRowKeys` / `expandedRowRender` | `Boolean/String \|
Number/Array/Function` | `false/72/[]/null` | 展开行；渲染函数 `(row)=>String` | 明细行 | |
`treeData` / `childrenKey` / `treeIndent` / `defaultExpandAll` | `Boolean/String/String \|
Number/Boolean` | `false/'children'/40/false` | 树表配置 | 层级数据 | | `spanMethod` /
`spanMethodData` | `Function` | `null` | `(ctx)=>{ rowspan,colspan }` | 合并单元格 | | `showSummary`
/ `summaryMethod` | `Boolean/Function` | `false/null` | 汇总行及 `({ columns,data })=>Object\|Array`
| 汇总 | | `page` / `pageSize` / `total` / `showPagination` / `pageSizeOptions` | `String \|
Number/String \| Number/String \| Number/Boolean/Array` | `1/0/0/false/[10,20,50]` | 分页 | 分页 | |
`virtualScroll` / `virtualRowHeight` / `virtualBuffer` / `virtualBodyHeight` | `Boolean/String \|
Number/String \| Number/String \| Number` | `false/88/6/''` | 虚拟滚动 | 大数据 | | `persistKey` /
`showBatchToolbar` | `String/Boolean` | `''/false` | 列配置持久化、批量栏 | 管理表格 | |
`remoteSort` / `remoteFilter` / `remotePagination` / `remoteMethod` / `remoteImmediate` |
`Boolean/Boolean/Boolean/Function/Boolean` | `false/false/false/null/false` |
远程模式；`remoteMethod(payload)=>Promise<{data,total}>` | 服务端数据 | | `draggableColumns` /
`showColumnManager` / `columnPresets` | `Boolean/Boolean/Array` | `false/false/[]` |
列拖动、配置面板、预设 | 列管理 | | `customClass` / `customStyle` | `String/String \| Object` | `''`
| 根样式 | 样式 | ### `columns` 每项支持的字段 | 字段 | 类型 | 默认值 | 说明 | |---|---|---|---| |
`key,title,dataIndex,width,flex,align` | `String \| Number` | - |
列标识、标题、字段、宽度、弹性、对齐 | | `sortable,filterable,resizable,editable,hidden` | `Boolean`
| `false` | 排序、筛选、调宽、编辑、隐藏 | | `filterOptions` | `Array` | `[]` | `{ text, value }`
筛选项 | | `formatter` | `Function` | `null` | `(value,row,column)=>String` | | `fixed,children` |
`String/Array` | `''/[]` | `left/right` 固定与表头分组 | --- ## 事件 | 事件名称 | 回调参数 | 说明 |
| --- | --- | --- | | `sort` | `({ column, key, order, remote })` | 点击可排序列表头时触发。 | |
`row-click` / `cell-click` | `({ row, rowIndex })` / `({ row, rowIndex, column, columnIndex })` |
点击行或单元格时触发。 | | `update:selectedRowKeys` / `selection-change` | `(keys)` / `({ keys, rows
})` | 选择状态变化。 | | `update:page` / `update:pageSize` | `(page: Number)` / `(pageSize: Number)`
| 分页状态变化。 | | `page-change` / `page-size-change` | `({ page, pageSize, remote, filters, sort
})` | 切换页码或页大小。 | | `filter-change` | `({ column, key, values, remote, filters, sort })` |
选中或重置列筛选。 | | `update:expandedRowKeys` / `expand-change` | `(keys)` / `({ expandedKeys,
row, rowIndex, expanded })` | 展开行状态变化。 | | `tree-expand` | `({ row, rowIndex, key, expanded
})` | 树表节点展开状态变化。 | | `column-resize` / `cell-edit` | `({ column, key, width })` / `({
row, column, rowIndex, columnIndex, oldValue, newValue })` | 调整列宽或提交单元格编辑。 | |
`column-config-change` / `remote-data-change` | 配置详情 / `({ page, pageSize, sort, filters, total,
reason, data })` | 列配置或内置远程数据变化。 | ### 事件使用示例 ```vue
<template>
  <xtf-table
    :data="rows"
    :columns="columns"
    selectable
    :selected-row-keys="keys"
    @selection-change="select"
    @sort="sort"
    @cell-click="cell"
  />
</template>
<script>
export default {
  data() {
    return {
      keys: [],
      rows: [{ id: 1, name: 'A' }],
      columns: [{ title: '名称', dataIndex: 'name', sortable: true }]
    }
  },
  methods: {
    select(p) {
      console.log(p.keys)
    },
    sort(p) {
      console.log(p.order)
    },
    cell(p) {
      console.log(p.row)
    }
  }
}
</script>

方法

方法	参数	说明
`clearSelection()`	无	清空已选行，并触发 `update:selectedRowKeys` 与 `selection-change`。
`changePage(page)`	`page: Number`	切换页码，并触发分页事件。
`changePageSize(pageSize)`	`pageSize: Number`	切换每页数量并将页码重置为 1。
`requestRemoteData(reason)`	`reason?: String`	内置远程模式下请求数据；未启用内置远程时不执行请求。

插槽

插槽名	作用域参数	说明
`batch-toolbar`	`selected-rows`、`selected-row-keys`	替换批量操作栏默认的“清空选择”按钮。
`col-{column.key}`	`row`、`column`、`row-index`、`column-index`	替换指定列单元格，例如列 `key: 'status'` 对应 `#col-status`。
`expand-row`	`row`、`row-index`	替换可展开行的详情区域。
`empty`	无	替换无数据时的默认 `xtf-empty`。
`summary-{column.dataIndex}`	`columns`、`data`、`column`、`index`	替换汇总行指定列，例如 `dataIndex: 'amount'` 对应 `#summary-amount`。

列插槽示例

vue

<template>
  <xtf-table :data="rows" :columns="columns" @cell-click="cellClick">
    <template #col-status="{ row }">
      <xtf-tag :text="row.status" theme="success" />
    </template>
  </xtf-table>
</template>
<script>
export default {
  data() {
    return {
      columns: [{ key: 'status', title: '状态', dataIndex: 'status' }],
      rows: [{ id: 1, status: '已完成' }]
    }
  },
  methods: {
    cellClick(payload) {
      console.log('cell', payload.row.status)
    }
  }
}
</script>

主题说明

外壳使用 --xtf-card-bg、--xtf-card-border、--xtf-shadow-card。
表头、条纹行使用 --xtf-table-header-bg、--xtf-table-stripe-bg。
选中与排序强调使用 --xtf-color-primary。

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关变量。

xtf-table ​

组件说明 ​

基础用法 ​

1. 基础列 ​

2. 选择与分页 ​

3. 单元格插槽与编辑 ​

4. 树表 ​

方法 ​

插槽 ​

列插槽示例 ​

主题说明 ​

xtf-table

组件说明

基础用法

1. 基础列

2. 选择与分页

3. 单元格插槽与编辑

4. 树表

方法

插槽

列插槽示例

主题说明