Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

基础用法

指定 columns 和 data 就可以得到一个表格

Tip

由于表格宽度的计算规则，暂时如果需要表格自动撑满，需要给一个列指定宽度

vue
<template>
  <ap-table :columns="columns" :data="data" />
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const data = reactive([
  {
    key: '11',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
])
const columns = [
  {
    title: '姓名',
    field: 'name',
  },
  {
    title: 'age',
    field: 'age',
    prop: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
  },
  {
    title: 'Phone',
    field: 'phone',
    prop: 'phone',
  },
  {
    title: 'Address',
    field: 'address',
    width: '300px',
  },
]
</script>

斑马纹表格

使用带斑马纹的表格，可以更容易区分出不同行的数据。

stripe 属性可以创建带斑马纹的表格。如果 true, 表格将会带有斑马纹。

vue
<template>
  <ap-table :columns="columns" :data="data" stripe />
</template>

<script lang="ts" setup>
import { DataItem } from 'apathia-ui'
import { reactive } from 'vue'

const data = reactive<DataItem[]>([
  {
    key: '11',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
])
const columns = [
  {
    title: '姓名',
    field: 'name',
  },
  {
    title: 'age',
    field: 'age',
    prop: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
  },
  {
    title: 'Phone',
    field: 'phone',
    prop: 'phone',
  },
  {
    title: 'Address',
    field: 'address',
    width: '300px',
  },
]
</script>

带边框表格

默认情况下，Table 组件是不具有竖直方向的边框的,可以使用border属性，把该属性设置为true即可启用。

vue
<template>
  <ap-table :columns="columns" :data="data" border />
</template>

<script setup lang="ts">
import { reactive } from 'vue'
const data = reactive([
  {
    key: '11',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
])
const columns = [
  {
    title: '姓名',
    field: 'name',
  },
  {
    title: 'age',
    field: 'age',
    prop: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
  },
  {
    title: 'Phone',
    field: 'phone',
    prop: 'phone',
  },
  {
    title: 'Address',
    field: 'address',
    width: '300px',
  },
]
</script>

自定义表格的样式

指定 table 的相关特性，可以单独设置行，列，单元格的样式

TIP

在定义整行样式和 class 的时候，由于表格样式的覆盖，部分整体设置的样式无法生效，可以采用无筛选单元格的形式进行设置，即在设置单元格 class 和 style 的样式的时候不针对某一特殊的进行设置，直接返回样式和 class 。
要针对单个设置特殊的样式，可以返回公用样式（class）和单独样式（class）的组合。

vue
<template>
  <ap-table
    :columns="columns"
    :data="data"
    :header-row-class-name="headerRowClass"
    :header-row-style="headerRowStyle"
    :header-cell-class-name="headerCellClassName"
    :header-cell-style="headerCellStyle"
    :row-class-name="rowClassName"
    :row-style="rowStyle"
    :cell-class-name="cellClassName"
    :cell-style="cellStyle"
  />
</template>

<script lang="ts" setup>
import { DataItem } from 'apathia-ui'
import { reactive } from 'vue'

const data = reactive<DataItem[]>([
  {
    key: '11',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
])
const columns = [
  {
    title: '姓名',
    field: 'name',
  },
  {
    title: 'age',
    field: 'age',
    prop: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
  },
  {
    title: 'Phone',
    field: 'phone',
    prop: 'phone',
  },
  {
    title: 'Address',
    field: 'address',
    width: '300px',
  },
]

// 自定义表格的样式
// 自定义表头 class
const headerRowClass = () => 'table-header'
// 自定义表头样式
const headerRowStyle = () => ({ height: '80px' })
// 自定义表头单元格 class
const headerCellClassName = ({ colIndex }) =>
  colIndex === 1 ? 'cell-sky' : 'cell-green'
// 自定义表头单元格样式
const headerCellStyle = ({ colIndex }) =>
  colIndex === 1
    ? { color: 'rgba(5, 150, 105, 1)' }
    : { color: 'rgba(147, 197, 253, 1)' }
// 自定义行 class
const rowClassName = ({ rowIndex }) =>
  rowIndex % 2 === 0 ? 'row-high' : 'row-low'
// 自定义行 样式
const rowStyle = ({ rowIndex }) =>
  rowIndex % 2 === 1 ? { fontWeight: 700 } : { fontWeight: 100 }
// 自定义单元格 class
const cellClassName = ({ rowIndex, colIndex }) =>
  rowIndex === 1 && colIndex === 1 ? 'cell-pink' : ''
// 自定义单元格样式
const cellStyle: any = ({ row, colIndex }) =>
  colIndex === 1 && row.age > 20
    ? { backgroundColor: 'rgba(251, 191, 36, 1)' }
    : null
</script>

<style scoped>
.table-header {
  height: 100px;
}
.cell-sky {
  background-color: rgba(147, 197, 253, 1);
}
.cell-green {
  background-color: rgba(5, 150, 105, 1);
}
.row-high {
  height: 120px;
}
.row-low {
  height: 70px;
}
.cell-pink {
  color: rgba(244, 114, 182, 1);
}
</style>

固定表头

纵向内容过多时，可选择固定表头。

只要在 Table 中定义了 height 属性，即可实现固定表头的表格，而不需要额外的代码。
文档样式暂时固定样式显示有点问题，待修复！！！（实际使用没有问题）

vue
<template>
  <ap-table :columns="columns" :data="data" :height="300" />
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const data = reactive([
  {
    key: '11',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
])
const columns = [
  {
    title: '姓名',
    field: 'name',
  },
  {
    title: 'age',
    field: 'age',
    prop: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
  },
  {
    title: 'Phone',
    field: 'phone',
    prop: 'phone',
  },
  {
    title: 'Address',
    field: 'address',
    width: '300px',
  },
]
</script>

固定列

横向内容过多时，可选择固定列。

在 column 中加上 fixed 属性可以实现固定列。使用固定列，最好使用 scroll 属性置顶最大的宽度，

传入字符串，left 或 right，表示左边固定还是右边固定。文档样式暂时固定列样式有点问题，待修复！！！

vue
<template>
  <ap-table :columns="fixedColumns" :data="data" :style="{ width: '1000px' }" />
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

const data = reactive([
  {
    key: '11',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
])
const fixedColumns: any[] = [
  {
    title: '姓名',
    field: 'name',
    fixed: 'left',
  },
  {
    title: 'age',
    field: 'age',
    prop: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
  },
  {
    title: 'Phone',
    field: 'phone',
    prop: 'phone',
  },
  {
    title: 'Address',
    field: 'address',
    width: '600px',
  },
]
</script>

表格合并

指定 cell-span 属性，可以控制单元格的合并

使用方法

自定义单元格合并。返回[rowSpan, colSpan]。只要其中一个设成0就会忽略渲染
colSpan是 2 表示占用两列。rowSpan 是 2 表示占用两行，在下面的例子中。第 2 行第 2 列占用了两行[2, 1]。所以第 2 行第 3 列应该设置colSpan为 0。

vue
<template>
  <ap-table
    :columns="columns"
    :data="data"
    :cell-span="cellSpan"
    :cell-style="cellStyle"
  />
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { DataItem } from 'apathia-ui'

const data = reactive<DataItem[]>([
  {
    key: '11',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
])
const columns = [
  {
    title: '姓名',
    field: 'name',
  },
  {
    title: 'age',
    field: 'age',
    prop: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
  },
  {
    title: 'Phone',
    field: 'phone',
    prop: 'phone',
  },
  {
    title: 'Address',
    field: 'address',
    width: '200px',
  },
]

// 自定义单元格合并。返回 [rowSpan, colSpan]。
// colSpan 是 2 表示占用两列。rowSpan 是 2 表示占用两行，在下面的例子中。第2行第2列占用了两行[2, 1]。所以第2行第3列应该设置colSpan为0。
const cellSpan: any = ({ rowIndex, colIndex }) => {
  if (colIndex === 2 && rowIndex === 2) return [2, 1]
  if (colIndex === 2 && rowIndex === 3) return [0, 1]
  if (colIndex === 4 && rowIndex === 4) return [1, 5]
  if (rowIndex === 4) return [1, 0]
  return [1, 1]
}

const cellStyle = ({ rowIndex, colIndex }) => {
  return rowIndex === 2 && colIndex === 2
    ? { color: 'red' }
    : rowIndex === 4
    ? { backgroundColor: 'skyblue' }
    : ''
}
</script>

动态显示隐藏

指定 column重的 when属性可以自定义显示与隐藏行
when 的属性值是一个函数，函数的参数是 { row, rowIndex },返回值为 boolean 如果是 true 就会渲染，反之不显示

vue
<template>
  <ap-button :style="{ marginBottom: '5px' }" primary @click="toggleShowName()"
    >{{ showName ? '隐藏' : '显示' }}姓名</ap-button
  >
  <ap-table :columns="toggledColumns" :data="data" />
</template>

<script lang="ts" setup>
import { DataItem } from 'apathia-ui'
import { reactive, ref } from 'vue'

const data = reactive<DataItem[]>([
  {
    key: '11',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
])

const toggledColumns = [
  {
    title: '姓名',
    field: 'name',
    when: () => showName.value,
  },
  {
    title: 'age',
    field: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
    width: 200,
  },
  {
    title: 'age',
    field: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
  },
  {
    title: 'age',
    field: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
  },
  {
    title: 'Phone',
    field: 'phone',
  },
  {
    title: 'Address',
    field: 'address',
    width: '200px',
  },
]

const showName = ref(true)
const toggleShowName = () => {
  showName.value = !showName.value
}
</script>

表格单选

选择单行数据时使用色块表示。

通过将 highlight-current-row 设置为 true 实现高亮效果。可以通过 v-model:current 拿到选中行的唯一索引，可以通过 v-model:currentSelected拿到选中行的数据对象。

vue
<template>
  <ap-table
    v-model:current="currentKey"
    row-key="key"
    :columns="highlightColumns"
    :data="data"
    highlight-current-row
  />
</template>

<script lang="ts" setup>
import { DataItem } from 'apathia-ui'
import { reactive, ref } from 'vue'

const data = reactive<DataItem[]>([
  {
    key: '11',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
])

const highlightColumns = [
  {
    title: '姓名',
    field: 'name',
  },
  {
    title: 'age',
    field: 'age',
    prop: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
    width: 200,
  },
  {
    title: 'age',
    field: 'age',
    prop: 'age',
  },
  {
    title: 'Phone',
    field: 'phone',
  },
  {
    title: 'Address',
    field: 'address',
  },
]
const currentKey = ref('4')
</script>

表格多选

columns 中可以定义一个 type: 'selection' 的多选列，在 Table 上可以通过 v-model:selected 拿到选中的对象数组，可以通过 v-model:selectedKeys 拿到唯一 id 数组，唯一 id 需要使用 rowKey 来指定，大部分场景都只需要单独使用其中一个 v-model

还可以通过在 column中设置为 selection 的列上添加 disabledWhen 来制定某一行禁止选择，使用方法类似于 when 的使用，根据返回值指定是否禁用

vue
<template>
  <div>
    <span style="color: #ba16e7">selected:</span>
    <span v-for="(item, index) in selected" :key="index"
      >{{ `${item.name}-${item.age}` }}、</span
    >
  </div>
  <div>
    <span style="color: #ba16e7">selectedKeys:</span>
    <span v-for="(item, index) in selectedKeys" :key="index">{{ item }}、</span>
  </div>

  <ap-table
    v-model:selected="selected"
    v-model:selectedKeys="selectedKeys"
    row-key="key"
    :data="data"
    :columns="multiselectColumns"
  />
</template>

<script lang="ts" setup>
import { DataItem } from 'apathia-ui'
import { ref } from 'vue'
// [obj1, obj2]
const selected = ref<{ name: string; age: number }[]>([])
// [obj1[key], obj2[key]]
const selectedKeys = ref([])

const multiselectColumns = [
  // 定义一个 type: 'selection' 列显示 <Checkbox />
  {
    title: '全选',
    width: 40,
    type: 'selection',
    disabledWhen: ({ row, rowIndex }) => rowIndex === 1,
  },
  {
    title: '姓名',
    field: 'name',
  },
  {
    title: 'age',
    field: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
  },
  {
    title: 'Phone',
    field: 'phone',
  },
  {
    title: 'Address',
    field: 'address',
  },
] as any

const data = [
  {
    key: '11',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',

    father: {
      name: 'Bob',
      age: 34,
    },
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
    father: {
      name: 'Cnaob',
      age: 37,
    },
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
    father: {
      name: 'Jacy',
      age: 56,
    },
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
    father: {
      name: 'Mike',
      age: 43,
    },
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
    father: {
      name: 'Jerry',
      age: 43,
    },
  },
] as unknown as DataItem[]
</script>

表格排序

对表格进行排序，可快速查找或对比数据。

在列中设置 sortable 属性即可实现以该列为基准的排序，接受一个 Boolean，默认为 false。可以通过 Table 的 sort 属性设置默认的排序列和排序顺序。可以使用在 Table上监听sort-change事件, 在事件回调中可以获取当前排序的字段名和排序顺序。

vue
<template>
  <ap-table
    row-key="key"
    :sort="tableSort"
    v-bind="options"
    @sort-change="onTableSortChange"
  />
</template>

<script lang="ts" setup>
import { reactive, computed } from 'vue'
import { createTable } from 'apathia-ui'
// 表示当前表格激活的排序
// 点击事件中你需要对次进行修改
const tableSort = reactive<any>({
  prop: 'age',
  order: 'desc',
})

// sortable: true 显示排序按钮
// prop 表示以什么排序
const sortColumns = [
  {
    title: '姓名',
    field: 'name',
  },
  {
    title: 'age',
    field: 'age',
    sortable: true,
    prop: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
    width: 200,
  },
  {
    title: 'age',
    field: 'age',
    prop: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
  },
  {
    title: 'age',
    field: 'age',
    prop: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
    sortable: true,
    prop: 'phone',
  },
  {
    title: 'Phone',
    field: 'phone',
  },
  {
    title: 'Address',
    field: 'address',
  },
]

const data = reactive([
  {
    key: '11',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',

    father: {
      name: 'Bob',
      age: 34,
    },
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
    father: {
      name: 'Cnaob',
      age: 37,
    },
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
    father: {
      name: 'Jacy',
      age: 56,
    },
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
    father: {
      name: 'Mike',
      age: 43,
    },
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
    father: {
      name: 'Jerry',
      age: 43,
    },
  },
])

const [tableOptions, tableUtils5] = createTable(sortColumns)

const options = computed<any>(() => tableOptions.value)

tableUtils5.setData(data)

const onTableSortChange = ({ prop, order }) => {
  tableSort.prop = prop
  tableSort.order = order

  // 这里可以是本地排序或者拉取接口，你需要自己对表格内容进行重新赋值
  tableUtils5.setData(
    data.sort((v1, v2) => (v1[prop] - v2[prop]) * (order === 'asc' ? 1 : -1)),
  )
}
</script>

自定义列

自定义列的显示内容，可组合其他组件使用。

在列中设置 render 属性，通过 render 返回一个渲染函数、字符串或者 JSX。

vue
<template>
  <ap-table :columns="columns" :data="data" />
</template>

<script lang="ts" setup>
import { reactive, h } from 'vue'

const data = reactive([
  {
    key: '11',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
])
const columns = [
  {
    title: '姓名',
    field: 'name',
  },
  {
    title: 'age',
    field: 'age',
    prop: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
  },
  {
    title: 'Phone',
    field: 'phone',
    prop: 'phone',
  },
  {
    title: 'Address',
    field: 'address',
    width: '300px',
  },
  {
    title: '操作',
    render: ({ row, rowIndex }) => {
      return h('div', '确认')
    },
  },
] as any[]
</script>

表格拓展行

通过 expand 属性可以控制表格的扩展行显示

使用方式

通过在 column 中将 type 类型指定为 expand ,同时 Table 上绑定 expand 值，指定 expand 出现的条件和展开后自定义渲染的内容

vue
<template>
  <ap-table :columns="expandColumns" :data="data" :expand="expandConfig" />
</template>

<script lang="ts" setup>
import { DataItem } from 'apathia-ui'
import { reactive } from 'vue'

const expandColumns: any[] = [
  {
    title: '索引',
    type: 'index',
  },
  // type: 'expand' 定义一个扩展列，如果该行可以
  // 被扩展，这里会显示一个  + 号
  {
    title: '展开',
    type: 'expand',
    width: 50,
  },
  {
    title: '姓名',
    field: 'name',
    width: 100,
  },
  {
    title: 'age',
    field: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
  },
  {
    title: 'Phone',
    field: 'phone',
  },
  {
    title: 'Address',
    field: 'address',
  },
]

const data = reactive<DataItem[]>([
  {
    key: '11',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
])

const expandConfig: any = {
  // 扩展行里显示的内容
  expandRowRender: ({ row }) => row.age,
  // 返回一个bool值用来控制该行是否可以有扩展行
  rowExpandable: ({ row }) => row.age > 30,
}
</script>

函数式赋值

Table组件的数据和操作数据的方法可以通过createTable动态创建和使用

特点

通过闭包的形式，将表格的数据和修改方式隔离开，可以避免表格数据在使用过程中被污染，更好保障了数据显示的准确性

vue
<template>
  <ap-button :style="{ marginBottom: '5px' }" primary @click="addInfo"
    >添加数据</ap-button
  >
  <ap-table v-bind="options" />
</template>

<script lang="ts" setup>
import { createTable } from 'apathia-ui'
import { computed } from 'vue'

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
]
const columns = [
  {
    title: '姓名',
    field: 'name',
  },
  {
    title: 'age',
    field: 'age',
    prop: 'age',
  },
  {
    title: 'Home phone',
    field: 'tel',
  },
  {
    title: 'Phone',
    field: 'phone',
    prop: 'phone',
  },
  {
    title: 'Address',
    field: 'address',
    width: '300px',
  },
]

const [tableOptions, tableUtil] = createTable(columns)
const options = computed<any>(() => tableOptions.value)
tableUtil.setData(data)

const addInfo = () => {
  const tempInfo = {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  }
  tableUtil.setData([...data, tempInfo])
}
</script>

Table Props

prop	说明	类型	默认值
data	表格里的数据	Array	[]
columns	列选项	Column[]	[]
stripe	是否启用斑马纹	boolean	false
border	是否启用表格 border	boolean	false
headerRowClassName	header row 的 class 生成函数	函数 () => string	无
headerRowStyle	header row style 生成函数	函数 () => ({})	无
headerCellClassName	header cell 的 class 生成函数	函数 ({ colIndex }) => string	无
headerCellStyle	header cell 的 style 生成函数	函数 ({ colIndex}) => ({})	无
rowClassName	tbody row 的 class 生成函数	函数 ({ row, rowIndex }) => string	无
rowStyle	tbody row 的 style 生成函数	函数 ({ row, rowIndex }) => ({})	无
cellClassName	tbody td cell 的 class 生成函数	函数 ({ row, rowIndex, col, colIndex }) => string	无
cellStyle	tbody row 的 style 生成函数	函数 ({ row, rowIndex, col, colIndex }) => ({})	无
cellSpan	用来处理单元格合并，返回[rowspan, celspan]表示一个 td 的 rowspan 和 celspan，其中一个为 0，这个单元格不显示	函数 ({ row, rowIndex, col, colIndex }) => ({})	() => [1, 1]
height	table 的高度,指定表格高度时，如果表格高度超过设定高度，滚动的时候会固定表头	Number	无
showHeader	是否显示 table header	boolean	true
showData	是否显示 table body	boolean	true
rowKey	表格数据的唯一键索引	string	'id'
highlightCurrentRow	高亮当前选中行，可以结合 current 实现单选	boolean	true
current	当前选中的行 index	Number	-1
selected	多选选中的行	Array	[]
selectedKeys	高亮当前选中行的唯一 key 集合	Array	[]
sort	表格排序	({ order: 'asc' \| 'desc', prop: string })	{}
expand	扩展行配置	({ rowExpandable: () => boolean, expandRowRender: CustomeRender })	() => {}
scroll	表格横向滚动的时候，需要指定 width 属性		{}

Table 事件

事件名称	说明	回调参数
update:selected	更新已经选中的行	DataItem[]
update:selectedKeys	更新选中的行的 key	[]
update:current	更新当前选中的行	DataItem
update:currentSelected	更新当前选中的行的 key	string number
sort-change	排序的回调	order, prop

Column 属性

属性	说明	类型	默认值
title	表格的标题	CustomRender	-
width	列宽度	Number \| String	-
align	对其方式	'left'、'center'、'right'	-
className	单元格 class	string	-
colSpan	theader > th 的 colSpan,用来自定义合并单元格	Number	1
sortable	排序	Boolean	false
prop	排序的 prop，指定排序的列	String	'id'
type	特殊类型，selection 是多选，index 是索引， expand 是展开按钮	'selection' \| 'index' \| 'expand'	'index'
fixed	固定列，固定到左边或者右边	'left' \| 'right'	-
when	显示列	() => boolean	-
field	指定显示的内容	String	-
render	自定义单元格的渲染，入参是 row, rowIndex, colIndex	RenderFn<{ row?: DataItem; colIndex?: number; rowIndex?: number }>	-
disabledWhen	指定禁用行	({row, rowIndex}) => boolean	-
buttons	通过 buttons 来渲染按钮	(arg: { row?: DataItem,rowIndex?: number,colIndex?: number}) => Button[]	-

createTable

返回值

const [tableOptions, tableUtils] = createTable(column, (shallowRef = false))

tableOptions

属性	说明	类型
data	表格数据	DataItem[]
loading	加载中	Boolean
columns	列配置	Column[]
pagination	分页信息	Pagination
showPagination	是否展示分页	Boolean
showData	是否展示表格数据	Boolean
showHeader	是否展示表格头	Boolean

tableUtils

属性	说明	类型
setColumns	设置表格列配置	(column[]) => void
getColmns	获取列配置	-
setData	设置数据信息	(DataItem[]) => void
getData	获取表格数据	-
getPagination	获取分页信息	-
setPagination	设置分页信息	(Pagination[]) => void
updatePager	更新分页	(pager) => void
getCurrentPage	获取当前页码	-
triggerPagination	转换是否显示分页	-
triggerData	转换是否显示数据	-
triggerHeader	转换是否显示头部	-

Table 表格 ​

基础用法 ​

斑马纹表格 ​

带边框表格 ​

自定义表格的样式 ​

固定表头 ​

固定列 ​

表格合并 ​

动态显示隐藏 ​

表格单选 ​

表格多选 ​

表格排序 ​

自定义列 ​

表格拓展行 ​

函数式赋值 ​

Table Props ​

Table 事件 ​

Column 属性 ​

createTable ​

返回值 ​

tableOptions ​

tableUtils ​