Skip to content

RTable 表格

有点意思的表格组件。

基础用法

该组件基于 NCard, NTable 封装,支持这两个组件的几乎所有的配置项。

并且还在此基础上封装了 useCheckedRowKeys, useTable 方法。

useCheckedRowKeys

用于便捷的管理选择模式。

tsx
import { RTable } from '@/components'

import { useCheckedRowKeys } from '@/components'

import type { DataTableColumns } from 'naive-ui'

const Demo = () =>
  defineComponent({
    setup() {
      const columns: DataTableColumns = [
        {
          type: 'selection',
        },
        {
          title: 'Age',
          key: 'age',
          sorter: (a, b) => a.age - b.age,
        },
        {
          title: 'Address',
          key: 'address',
        },
      ]
      const data = [
        { age: 18, address: 'address1', key: 1 },
        { age: 19, address: 'address2', key: 1 },
        { age: 20, address: 'address3', key: 1 },
      ]
      const [
        checkedRowKeys,
        { checkedRowKeysBind, getKeys, getRows, clearKey, clearAll, selectKey },
      ] = useCheckedRowKeys(data, columns, {
        rowKey: 'key',
        onChange: (keys, rows, meta) => {},
      })

      return {
        columns,
        data,
        checkedRowKeys,
        checkedRowKeysBind,
        getKeys,
        getRows,
        clearKey,
        clearAll,
        selectKey,
      }
    },
    render() {
      const { columns, data, checkedRowKeysBind } = this

      return (
        <RTable
          columns={columns}
          data={data}
          v-model:checkedRowKeys={this.checkedRowKeys}
          onUpdateCheckedRowKeys={checkedRowKeysBind.bind(this)}
        />
      )
    },
  })

useTable

tsx
import { RTable } from '@/components'

import { useTable } from '@/components'

import type { DataTableColumns } from 'naive-ui'

const Demo = defineComponent({
  setup() {
    const columns: DataTableColumns = [
      {
        type: 'selection',
      },
      {
        title: 'Age',
        key: 'age',
        sorter: (a, b) => a.age - b.age,
      },
      {
        title: 'Address',
        key: 'address',
      },
    ]
    const data = [
      { age: 18, address: 'address1', key: 1 },
      { age: 19, address: 'address2', key: 1 },
      { age: 20, address: 'address3', key: 1 },
    ]
    const [
      register,
      {
        getTableInstance,
        clearFilters,
        clearSorter,
        scrollTo,
        filters,
        sort,
        downloadCsv,
      },
    ] = useTable()

    return {
      register,
      columns,
      data,
    }
  },
  render() {
    const { register, columns, data } = this

    return (
      <RTable columns={columns} data={data} onRegister={register.bind(this)} />
    )
  },
})

props

名称类型默认值说明
cardPropsRTableCardProps{}配置表格外层的 NCard 容器样式,配置方式一致
toolbooleantrue是否显示工具栏
downloadCsvTableOptionsDownloadCsvTableOptions{}导出 csv 配置
titleVNode | string | numberundefined表格标题
toolOptionsVNode | () => VNodeundefined工具栏配置,可以与 coverTool 配置项结合使用
coverToolbooleanfalse是否覆盖工具栏
contextMenuOptionsDropdownOption[]undefined右键菜单配置,当该配置项不为 undefined 或者是一个有效数组时,会自动启用右键菜单,但是受到 disabledContextMenu 配置项影响
disabledContextMenubooleanfalse是否禁用右键菜单
onContextMenuClick(key: string, option: DropdownOption) => voidundefined右键菜单点击事件
wrapperBorderedbooleantrue是否显示外层 NCard 容器边框,该配置项优先级最高
printTableOptionsPrintTableOptions{}打印表格配置
onUpdateColumns(arr: DataTableColumn[]) => voidundefined列配置更新事件
onContextmenu(row: Recordable, index: number, e: MouseEvent) => voidundefined于启用右键菜单后被 Table 强行代理后的右键点击事件回调
onRegister(tableInst: RTableInst) => voidundefined表格实例注册事件,如果需要使用 useTable hook,该配置项必填
remotebooleantrue启用远程数据加载,需要异步数据并且分页的时候,需要设置
stripedbooleantrue是否显示斑马纹
statisticsOptionsTabsStatisticsItem[][]统计配置项
onStatisticsUpdateValue(option: TabsStatisticsItem) => voidundefined统计项更新事件

hooks

useTable

名称类型说明
getTableInstance() => RTableInst获取表格实例
clearFilters() => void清除所有过滤器
clearSorter`() => void清除所有排序器
downloadCsv(options?: CsvOptionsType) => void下载 csv
filters(filters: FilterState | null) => void设置过滤器
page(page: number) => void设置页码
scrollToScrollTo滚动到指定位置
sort(columnKey: ColumnKey, order: SortOrder) => void设置排序器
print() => void打印表格
示例
tsx
import { RTable } from '@/components'

import { useTable } from '@/components'

const Demo = () => {
  const [
    register,
    {
      getTableInstance,
      clearFilters,
      clearSorter,
      scrollTo,
      filters,
      sort,
      downloadCsv,
      print,
    },
  ] = useTable()

  return <RTable onRegister={register} />
}

useCheckedRowKeys

名称类型说明
keysRefRef<RowKey[]>选中的行的 key 集合
checkedRowsRef<T[]>选中的行的数据集合
checkedRowKeysBindcheckedRowKeysBind: (keys: RowKey[], rows: Recordable[], meta: { row: Recordable | undefined; action: Action; }) => void绑定选中行的 keys 和 rows
getKeys() => RowKey[]获取选中的 keys
getRows() => T[]获取选中的 rows
clearKey(key: RowKey) => void清除指定 key
clearAll() => void清除所有 key
selectKey(key: RowKey) => void选中指定 key
示例
tsx
import { RTable } from '@/components'

import { useCheckedRowKeys } from '@/components'

import type { DataTableColumns } from 'naive-ui'

interface Demo {
  age: number
  address: string
  key: string
}

const Demo = () => {
  const columns: DataTableColumns<Demo> = [
    {
      type: 'selection',
    },
    {
      title: 'Age',
      key: 'age',
      sorter: (a, b) => a.age - b.age,
    },
    {
      title: 'Address',
      key: 'address',
    },
  ]
  const data = []
  const [
    checkedRowKeys,
    { checkedRowKeysBind, getKeys, getRows, clearKey, clearAll, selectKey },
  ] = useCheckedRowKeys<Demo>(data, columns, {
    rowKey: 'key',
  })

  return (
    <RTable
      onUpdateCheckedRowKeys={checkedRowKeysBind}
      v-model:checkedRowKeys={checkedRowKeys.value}
    />
  )
}

Released under the MIT License.