表格组件 - STable

不是 ATable 的封装，支持列拉伸/拖拽/属性配置，单元格合并/卡槽定义，Checkbox/Radio、内置分页等功能

演示

基本用法

基本用法

通过 columns 选项 + sources 数据源 + border 边框，实现一个带边框的简单表格

Name	Age	Like	Email
Alice	36	Cycling	alice@gmail.com
Mary	22	Swim	mary@gmail.com
John	27	Music	john@gmail.com

复制代码

显示代码

<template>
  <STable
    :columns="columns"
    :sources="sources"
    :border="true"
  />
</template>

<script setup lang="ts">
const columns = tableColumnsDefiner([
  { title: 'Name', dataIndex: 'name' },
  { title: 'Age', dataIndex: 'age' },
  { title: 'Like', dataIndex: 'like' },
  { title: 'Email', dataIndex: 'email' },
])

const sources = tableSourcesDefiner([
  { name: 'Alice', age: 36, like: 'Cycling', email: 'alice@gmail.com' },
  { name: 'Mary', age: 22, like: 'Swim', email: 'mary@gmail.com' },
  { name: 'John', age: 27, like: 'Music', email: 'john@gmail.com' },
])
</script>

带斑马纹表格

带斑马纹表格

要实现一个带斑马纹的表格，STable 可以通过 customBodyerCellRender 自定义表格 tbody <td> 的样式。

Name	Age	Like	Email
Alice	36	Cycling	alice@gmail.com
Mary	22	Swim	mary@gmail.com
John	27	Music	john@gmail.com
David	29	Magic	david@gmail.com
George	29	Badminton	george@gmail.com
Eric	33	Photograph	eric@gmail.com

复制代码

显示代码

<template>
  <STable
    :columns="columns"
    :sources="sources"
    :customBodyerCellRender="customBodyerCellRender"
    :border="true"
  />
</template>

<script setup lang="ts">
const columns = tableColumnsDefiner([
  { title: 'Name', dataIndex: 'name' },
  { title: 'Age', dataIndex: 'age' },
  { title: 'Like', dataIndex: 'like' },
  { title: 'Email', dataIndex: 'email' },
])

const sources = tableSourcesDefiner([
  { name: 'Alice', age: 36, like: 'Cycling', email: 'alice@gmail.com' },
  { name: 'Mary', age: 22, like: 'Swim', email: 'mary@gmail.com' },
  { name: 'John', age: 27, like: 'Music', email: 'john@gmail.com' },
  { name: 'David', age: 29, like: 'Magic', email: 'david@gmail.com' },
  { name: 'George', age: 29, like: 'Badminton', email: 'george@gmail.com' },
  { name: 'Eric', age: 33, like: 'Photograph', email: 'eric@gmail.com' },
])

const customBodyerCellRender = tableCustomBodyerCellRenderDefiner(options => {
  if (options.groupIndex % 2 === 1) {
    return {
      attrs: {
        style: 'background-color: #fcfcfc',
      },
    }
  }
})
</script>

带总结栏表格

带总结栏表格

通过 columns 选项 + sources 数据源 + summarys 总结栏，实现一个带总结栏的表格

科目	Alice	Mary	John
数学	99	88	89
语文	92	93	91
英文	96	96	99
政治	90	96	91
物理	98	91	92
化学	99	89	87
总结	574	553	549

复制代码

显示代码

<template>
  <div style="width: 100%; height: 300px; overflow: auto">
    <STable
      :border="true"
      :sticky="sticky"
      :columns="columns"
      :sources="sources"
      :summarys="summarys"
      :customFooterCellRender="customFooterCellRender"
    />
  </div>
</template>

<script setup lang="ts">
const sticky = tableStickyDefiner({
  topHeader: true, // 置顶吸附
  bottomFooter: true, // 置底吸附
})

const columns = tableColumnsDefiner([
  { title: '科目', dataIndex: 'subject', align: 'center', width: 100 },
  { title: 'Alice', dataIndex: 'alice', align: 'center' },
  { title: 'Mary', dataIndex: 'mary', align: 'center' },
  { title: 'John', dataIndex: 'john', align: 'center' },
])

const sources = tableSourcesDefiner([
  { subject: '数学', alice: 99, mary: 88, john: 89 },
  { subject: '语文', alice: 92, mary: 93, john: 91 },
  { subject: '英文', alice: 96, mary: 96, john: 99 },
  { subject: '政治', alice: 90, mary: 96, john: 91 },
  { subject: '物理', alice: 98, mary: 91, john: 92 },
  { subject: '化学', alice: 99, mary: 89, john: 87 },
])

const summarys = tableSummarysDefiner([
  { subject: '总结' },
])

const customFooterCellRender = tableCustomFooterCellRenderDefiner(option => {
  if (option.column.key !== 'subject') {
    return {
      attrs: {
        style: { backgroundColor: '#fcfcfc' },
      },
      children: sources.value.reduce((total, source: any) => total + source[option.column.key], 0),
    }
  }

  return {
    attrs: {
      style: { backgroundColor: '#fcfcfc' },
    },
  }
})
</script>

表格事件自定义

表格事件自定义

STable 支持 customBodyerRowAttrs 定义表格行事件，也可以通过 customBodyerCellRender 定义单元格事件

Name	Age	Like	Email
Alice	36	Cycling	alice@gmail.com
Mary	22	Swim	mary@gmail.com
John	27	Music	john@gmail.com
David	29	Magic	david@gmail.com
George	29	Badminton	george@gmail.com
Eric	33	Photograph	eric@gmail.com

复制代码

显示代码

<template>
  <STable
    :columns="columns"
    :sources="sources"
    :customBodyerCellRender="customBodyerCellRender"
    :customBodyerRowAttrs="customBodyerRowAttrs"
    :border="true"
  />
</template>

<script setup lang="ts">
import AMessage from 'ant-design-vue/es/message'

const columns = tableColumnsDefiner([
  { title: 'Name', dataIndex: 'name' },
  { title: 'Age', dataIndex: 'age' },
  { title: 'Like', dataIndex: 'like' },
  { title: 'Email', dataIndex: 'email' },
])

const sources = tableSourcesDefiner([
  { name: 'Alice', age: 36, like: 'Cycling', email: 'alice@gmail.com' },
  { name: 'Mary', age: 22, like: 'Swim', email: 'mary@gmail.com' },
  { name: 'John', age: 27, like: 'Music', email: 'john@gmail.com' },
  { name: 'David', age: 29, like: 'Magic', email: 'david@gmail.com' },
  { name: 'George', age: 29, like: 'Badminton', email: 'george@gmail.com' },
  { name: 'Eric', age: 33, like: 'Photograph', email: 'eric@gmail.com' },
])

const customBodyerRowAttrs = tableCustomBodyerRowAttrsDefiner(options => {
  // 行单击事件
  return {
    style: {
      cursor: 'pointer',
    },
    onClick: (event: Event) => {
      AMessage.success('触发了 => 表格行事件', 1.3)
      console.log('触发表格行单击事件: ', options)
      event.stopPropagation()
    },
  }
})

const customBodyerCellRender = tableCustomBodyerCellRenderDefiner(options => {
  // 单元格单击事件
  // return {
  //   attrs: {
  //     style: {
  //       cursor: 'pointer',
  //     },
  //     onClick: (event: Event) => {
  //       AMessage.success('触发了 => 单元格事件', 1.3)
  //       console.log('触发单元格单击事件: ', options)
  //       event.stopPropagation()
  //     },
  //   },
  // }
})
</script>

表格卡槽自定义

表格卡槽自定义

Slots 中 headerCell 定义表格 thead 单元格内容

Slots 中 bodyerCell 定义表格 tbody 单元格内容

Slots 中 footerCell 定义表格 tfoot 单元格内容

科目	Alice (No.1)	Mary	John
数学	99	88	89
语文	92	93	91
英文	96	96	99
政治	90	96	91
物理	98	91	92
化学	99	89	87
总结	574	553	549

复制代码

显示代码

<template>
  <div style="width: 100%; height: 300px; overflow: auto">
    <STable
      :border="true"
      :sticky="sticky"
      :columns="columns"
      :sources="sources"
      :summarys="summarys"
      :customFooterCellRender="customFooterCellRender"
    >
      <template #headerCell="{ column }">
        <template v-if="column.key === 'subject'">
          <FormOutlined /> {{ column.title }}
        </template>

        <template v-if="column.key === 'alice'">
          {{ column.title }} (No.1)
        </template>
      </template>

      <template #bodyerCell="{ column, value }">
        <template v-if="column.key !== 'subject'">
          <div style="display: inline-flex; align-items: center; width: 30px;">
            <span style="margin-right: 3px;">
              {{ value }}
            </span>

            <StarFilled
              v-if="value >= 95"
              style="font-size: 12px; color: #FFC107;"
            />
          </div>
        </template>
      </template>

      <template #footerCell="{ column, value }">
        <template v-if="column.key !== 'subject'">
          <span style="font-size: 14px; font-weight: 600;">{{ value }}</span>
        </template>
      </template>
    </STable>
  </div>
</template>

<script setup lang="ts">
const sticky = tableStickyDefiner({
  topHeader: true, // 置顶吸附
  bottomFooter: true, // 置底吸附
})

const columns = tableColumnsDefiner([
  { title: '科目', dataIndex: 'subject', align: 'center', width: 100 },
  { title: 'Alice', dataIndex: 'alice', align: 'center' },
  { title: 'Mary', dataIndex: 'mary', align: 'center' },
  { title: 'John', dataIndex: 'john', align: 'center' },
])

const sources = tableSourcesDefiner([
  { subject: '数学', alice: 99, mary: 88, john: 89 },
  { subject: '语文', alice: 92, mary: 93, john: 91 },
  { subject: '英文', alice: 96, mary: 96, john: 99 },
  { subject: '政治', alice: 90, mary: 96, john: 91 },
  { subject: '物理', alice: 98, mary: 91, john: 92 },
  { subject: '化学', alice: 99, mary: 89, john: 87 },
])

const summarys = tableSummarysDefiner([
  { subject: '总结' },
])

const customFooterCellRender = tableCustomFooterCellRenderDefiner(option => {
  if (option.column.key !== 'subject') {
    return {
      attrs: {
        style: { backgroundColor: '#fcfcfc' },
      },
      children: sources.value.reduce((total, source: any) => total + source[option.column.key], 0),
    }
  }

  return {
    attrs: {
      style: { backgroundColor: '#fcfcfc' },
    },
  }
})
</script>

远程加载数据

远程加载数据

通过 loadData 动态加载数据 和 paginate 分页选项，实现异步请求数据并进行渲染的表格。

Name	Age	Like	Email
暂无数据

• 第 0-0 条 (共 0 条)
• 1

复制代码

显示代码

<template>
  <STable
    v-model:columns="columns"
    v-model:paginate="paginate"
    :loadData="loadData"
    :immediate="true"
  />
</template>

<script setup lang="ts">
const columns = tableColumnsDefiner([
  { title: 'Name', dataIndex: 'name' },
  { title: 'Age', dataIndex: 'age' },
  { title: 'Like', dataIndex: 'like' },
  { title: 'Email', dataIndex: 'email' },
])

const paginate = tablePaginateDefiner({
  pageNo: 1,
  pageSize: 5,
  totalPage: 0,
  totalSize: 0,
  showSizeChanger: false,
  showTotal: true,
  visible: true,
  fixed: true,
})

const loadData = tableLoadDataDefiner(options => {
  // 模拟 800ms 后，获取接口数据
  const promise = new Promise(resolve => {
    setTimeout(resolve, 800)
  })

  if (options.paginate.pageNo === 1) {
    return promise.then(() => {
      return {
        code: '0000',
        message: null,
        result: {
          data: [
            { name: 'Alice', age: 36, like: 'Cycling', email: 'alice@gmail.com' },
            { name: 'Mary', age: 22, like: 'Swim', email: 'mary@gmail.com' },
            { name: 'John', age: 27, like: 'Music', email: 'john@gmail.com' },
            { name: 'Tim', age: 19, like: 'IT', email: 'tim@gmail.com' },
            { name: 'David', age: 24, like: 'Draw', email: 'david@gmail.com' },
          ],
          pageNo: 1,
          pageSize: 5,
          totalPage: 2,
          totalSize: 9,
        },
      }
    })
  }

  if (options.paginate.pageNo === 2) {
    return promise.then(() => {
      return {
        code: '0000',
        message: null,
        result: {
          data: [
            { name: 'George', age: 21, like: 'History', email: 'george@gmail.com' },
            { name: 'Peter', age: 22, like: 'Draw', email: 'peter@gmail.com' },
            { name: 'Eric', age: 31, like: 'Cycling', email: 'eric@gmail.com' },
            { name: 'Larry', age: 22, like: 'Music', email: 'larry@gmail.com' },
          ],
          pageNo: 2,
          pageSize: 5,
          totalPage: 2,
          totalSize: 9,
        },
      }
    })
  }

  return {
    code: '0000',
    message: null,
    result: {
      data: [],
      pageNo: 1,
      pageSize: 5,
      totalPage: 0,
      totalSize: 0,
    },
  }
})
</script>

表格列排序(多列)

表格列排序(多列)

通过 column.sorter="true" 启用对表格某列的排序，点击排序后，会在 loadData 回调中的 options.sorter 获取排序情况，作为参数传递给后端，或前端执行排序处理。如果需要开启多列排序选项，可以设置 columnSorterMultiple="true"

多列排序

学生	语文	数学	英语	物理	地理
暂无数据

• 第 0-0 条 (共 0 条)
• 1

复制代码

显示代码

<template>
  <div class="container">
    <div style="width: 100%; margin: 0 0 10px;">
      <div style="display: inline-block; margin: 0 8px 16px 0">
        多列排序
      </div>

      <ASwitch
        v-model:checked="columnSorterMultiple"
        unCheckedChildren="关闭"
        checkedChildren="开启"
      />
    </div>

    <STable
      v-model:columns="columns"
      v-model:paginate="paginate"
      :defaultColumnSorters="defaultColumnSorters"
      :columnSorterMultiple="columnSorterMultiple"
      :loadData="loadData"
      :immediate="true"
    />
  </div>
</template>

<script setup lang="ts">
const columns = tableColumnsDefiner([
  { title: '学生', dataIndex: 'student', align: 'center', width: 95, fixed: 'left' },
  { title: '语文', dataIndex: 'language', align: 'center', sorter: true },
  { title: '数学', dataIndex: 'math', align: 'center', sorter: true },
  { title: '英语', dataIndex: 'english', align: 'center', sorter: true },
  { title: '物理', dataIndex: 'physical', align: 'center' },
  { title: '地理', dataIndex: 'geography', align: 'center' },
])

const paginate = tablePaginateDefiner({
  pageNo: 1,
  pageSize: 10,
  totalPage: 0,
  totalSize: 0,
  showSizeChanger: false,
  showTotal: true,
  visible: true,
  fixed: true,
})

// 是否支持多列排序
const columnSorterMultiple = ref(false)

// 设定默认排序
const defaultColumnSorters = tableSorterDefiner([
  {
    field: 'math',
    value: 'ascend',
  },
])

// 模拟数据排序
const sortData = (data: any[], sorts: any[]) => {
  return data.sort((next: any, prev: any) => {
    for (const sort of sorts) {
      if (sort.value === 'ascend' && next[sort.field] < prev[sort.field]) {
        return -1
      }

      if (sort.value === 'ascend' && next[sort.field] > prev[sort.field]) {
        return 1
      }

      if (sort.value === 'descend' && next[sort.field] < prev[sort.field]) {
        return 1
      }

      if (sort.value === 'descend' && next[sort.field] > prev[sort.field]) {
        return -1
      }
    }

    return 1
  })
}

// 加载远程数据
const loadData = tableLoadDataDefiner(options => {
  // 模拟 600ms 后，获取接口数据
  const promise = new Promise(resolve => {
    setTimeout(resolve, 600)
  })

  if (options.paginate.pageNo === 1) {
    const data = [
      { student: 'Alice', language: 99, math: 91, english: 88, physical: 90, geography: 87 },
      { student: 'Mary', language: 88, math: 97, english: 90, physical: 88, geography: 97 },
      { student: 'John', language: 99, math: 86, english: 88, physical: 89, geography: 93 },
      { student: 'Betty', language: 88, math: 89, english: 90, physical: 87, geography: 97 },
      { student: 'Carol', language: 99, math: 99, english: 97, physical: 88, geography: 93 },
      { student: 'Zora', language: 93, math: 91, english: 88, physical: 99, geography: 97 },
      { student: 'Jude', language: 93, math: 97, english: 93, physical: 87, geography: 90 },
      { student: 'Kim', language: 97, math: 91, english: 95, physical: 97, geography: 87 },
      { student: 'Astrid', language: 97, math: 89, english: 83, physical: 97, geography: 90 },
    ]

    return promise.then(() => {
      return {
        code: '0000',
        message: null,
        result: {
          data: sortData(data, options.sorter),
          pageNo: 1,
          pageSize: 10,
          totalPage: 1,
          totalSize: 9,
        },
      }
    })
  }

  return {
    code: '0000',
    message: null,
    result: {
      data: [],
      pageNo: 1,
      pageSize: 5,
      totalPage: 0,
      totalSize: 0,
    },
  }
})
</script>

不同尺寸的表格

不同尺寸的表格

STable 表格的大小有 'default'，'middle'，'small' 这三种尺寸，可以通过 Size 进行指定

请选择

大 (default)

Name	Age	Like	Email
暂无数据

• 第 0-0 条 (共 0 条)
• 1

复制代码

显示代码

<template>
  <div class="container">
    <div style="width: 100%; margin: 0 0 10px;">
      <div style="display: inline-block; margin: 0 8px 16px 0">
        请选择
      </div>

      <ASelect
        v-model:value="size"
        style="width: 120px;"
        :options="options"
      />
    </div>

    <STable
      v-model:columns="columns"
      v-model:paginate="paginate"
      :loadData="loadData"
      :immediate="true"
      :size="size"
    />
  </div>
</template>

<script setup lang="ts">
const size = ref<any>('default')

const columns = tableColumnsDefiner([
  { title: 'Name', dataIndex: 'name' },
  { title: 'Age', dataIndex: 'age' },
  { title: 'Like', dataIndex: 'like' },
  { title: 'Email', dataIndex: 'email' },
])

const paginate = tablePaginateDefiner({
  pageNo: 1,
  pageSize: 5,
  totalPage: 0,
  totalSize: 0,
  showSizeChanger: false,
  showTotal: true,
  visible: true,
  fixed: true,
})

const loadData = tableLoadDataDefiner(options => {
  // 模拟 800ms 后，获取接口数据
  const promise = new Promise(resolve => {
    setTimeout(resolve, 800)
  })

  if (options.paginate.pageNo === 1) {
    return promise.then(() => {
      return {
        code: '0000',
        message: null,
        result: {
          data: [
            { name: 'Alice', age: 36, like: 'Cycling', email: 'alice@gmail.com' },
            { name: 'Mary', age: 22, like: 'Swim', email: 'mary@gmail.com' },
            { name: 'John', age: 27, like: 'Music', email: 'john@gmail.com' },
            { name: 'Tim', age: 19, like: 'IT', email: 'tim@gmail.com' },
            { name: 'David', age: 24, like: 'Draw', email: 'david@gmail.com' },
          ],
          pageNo: 1,
          pageSize: 5,
          totalPage: 2,
          totalSize: 9,
        },
      }
    })
  }

  if (options.paginate.pageNo === 2) {
    return promise.then(() => {
      return {
        code: '0000',
        message: null,
        result: {
          data: [
            { name: 'George', age: 21, like: 'History', email: 'george@gmail.com' },
            { name: 'Peter', age: 22, like: 'Draw', email: 'peter@gmail.com' },
            { name: 'Eric', age: 31, like: 'Cycling', email: 'eric@gmail.com' },
            { name: 'Larry', age: 22, like: 'Music', email: 'larry@gmail.com' },
          ],
          pageNo: 2,
          pageSize: 5,
          totalPage: 2,
          totalSize: 9,
        },
      }
    })
  }

  return {
    code: '0000',
    message: null,
    result: {
      data: [],
      pageNo: 1,
      pageSize: 5,
      totalPage: 0,
      totalSize: 0,
    },
  }
})

const options = [
  { label: '大 (default)', value: 'default' },
  { label: '中 (middle)', value: 'middle' },
  { label: '小 (small)', value: 'small' },
]
</script>

单元格自动省略

单元格自动省略

设置 columnPresetResizable 允许通过拉伸调整列宽度

设置 column.ellipsis 可以让单元格根据宽度自动省略

设置 column.tooltip 自动省略，并具有 Tooltip 提示

Name	Age	Email (ellipsis)	Info (tooltip)
Alice	36	developer.alice-developer-going@gamil.com	Alice is an Internet developer. She likes cycling
Mary	22	developer.is-swimming-number-1@gamil.com	Mary is a junior student who enjoys swimming
John	27	developer.music.soul-libertarian@gamil.com	John loves music and often goes to bars to sing

复制代码

显示代码

<template>
  <STable
    columnPresetResizable
    :columns="columns"
    :sources="sources"
  />
</template>

<script setup lang="ts">
const columns = tableColumnsDefiner([
  { title: 'Name', dataIndex: 'name', minWidth: 90, maxWidth: 90 },
  { title: 'Age', dataIndex: 'age', width: 80, minWidth: 80, maxWidth: 120 },
  { title: 'Email (ellipsis)', dataIndex: 'email', ellipsis: true },
  { title: 'Info (tooltip)', dataIndex: 'info', tooltip: true },
])

const sources = tableSourcesDefiner([
  { name: 'Alice', age: 36, email: 'developer.alice-developer-going@gamil.com', info: 'Alice is an Internet developer. She likes cycling' },
  { name: 'Mary', age: 22, email: 'developer.is-swimming-number-1@gamil.com', info: 'Mary is a junior student who enjoys swimming' },
  { name: 'John', age: 27, email: 'developer.music.soul-libertarian@gamil.com', info: 'John loves music and often goes to bars to sing' },
])
</script>

表格分组表头

表格分组表头

表格表头 thead 分组可以通过 column 中 chidren 配置实现，如果当前列过多，则可以通过 :columnPresetSettings="true" 启用列筛选配置

Name	Other	Company		Gender
	Address	Company Address	Company Name
	Street
Alice	BeiLun	Address-2019	Name-2019	F
Mary	BaiFeng	Address-1913	Name-1913	F
Jack	HaiShu	Address-0907	Name-0907	M
Astrid	JiangBei	Address-1101	Name-1101	F
Zora	YinZhou	Address-1519	Name-1519	F

复制代码

显示代码

<template>
  <div style="width: 100%; overflow: auto">
    <STable
      v-model:columns="columns"
      v-model:sources="sources"
      :columnPresetSettings="true"
      :scroll="scroll"
      :sticky="sticky"
    />
  </div>
</template>

<script setup lang="ts">
const scroll = tableScrollDefiner({
  x: 'max-content',
  overflow: 'visible',
})

const sticky = tableStickyDefiner({
  topHeader: true,
})

const columns = tableColumnsDefiner([
  {
    title: 'Name',
    dataIndex: 'name',
    fixed: 'left',
    width: 100,
    settings: {
      disabled: true, // 禁止隐藏该列
    },
  },
  {
    title: 'Other',
    dataIndex: 'other',
    children: [
      {
        title: 'Age',
        dataIndex: 'age',
        width: 200,
        settings: {
          checkbox: false, // 隐藏该列
        },
      },
      {
        title: 'Address',
        dataIndex: 'Address',
        children: [
          {
            title: 'Street',
            dataIndex: 'street',
            width: 200,
          },
          {
            title: 'Block',
            dataIndex: 'block',
            children: [
              {
                title: 'Building',
                dataIndex: 'building',
                width: 100,
              },
              {
                title: 'Door No.',
                dataIndex: 'number',
                width: 100,
              },
            ],
            settings: {
              checkbox: false, // 隐藏该列及其子列
            },
          },
        ],
      },
    ],
  },
  {
    title: 'Company',
    dataIndex: 'company',
    children: [
      {
        title: 'Company Address',
        dataIndex: 'companyAddress',
        width: 200,
      },
      {
        title: 'Company Name',
        dataIndex: 'companyName',
      },
    ],
  },
  {
    title: 'Gender',
    dataIndex: 'gender',
    fixed: 'right',
    align: 'center',
    width: 80,
  },
])

const sources = tableSourcesDefiner([
  { name: 'Alice', age: 32, street: 'BeiLun', building: 'C1', number: '2019', companyAddress: 'Address-2019', companyName: 'Name-2019', gender: 'F' },
  { name: 'Mary', age: 22, street: 'BaiFeng', building: 'C3', number: '1913', companyAddress: 'Address-1913', companyName: 'Name-1913', gender: 'F' },
  { name: 'Jack', age: 27, street: 'HaiShu', building: 'B9', number: '0907', companyAddress: 'Address-0907', companyName: 'Name-0907', gender: 'M' },
  { name: 'Astrid', age: 18, street: 'JiangBei', building: 'C1', number: '1101', companyAddress: 'Address-1101', companyName: 'Name-1101', gender: 'F' },
  { name: 'Zora', age: 21, street: 'YinZhou', building: 'A1', number: '1519', companyAddress: 'Address-1519', companyName: 'Name-1519', gender: 'F' },
])
</script>

表格行/列合并

表格行/列合并

表格 tbody 的行/列合并，可以通过 customBodyerCellRender 来完成。因 cellMegreNormalize 默认值为 true, 它会帮助我们推导合并情况。所以我们只需设定某单元格合并多少列或行，无需关心相邻单元格是否需要设置 rowspan="0" 或 colspan="0"

注: 必须设置 persistSourceRanges="true"

Name	Age	Home Telephone		Address
Alice	36	0574-86081869	18212951391	NingBo
Mary	22	0580-86083878		ZhouShan
John		0580-86081257		ZhouShan

复制代码

显示代码

<template>
  <STable
    :border="true"
    :persistSourceRanges="true"
    :customBodyerCellRender="customBodyerCellRender"
    :columns="columns"
    :sources="sources"
  />
</template>

<script setup lang="ts">
const columns = tableColumnsDefiner([
  { title: 'Name', dataIndex: 'name', width: 95 },
  { title: 'Age', dataIndex: 'age', width: 90 },
  { title: 'Home Telephone', dataIndex: 'homeTelephone', colSpan: 2 },
  { title: 'Mobile Telephone', dataIndex: 'mobileTelephone' },
  { title: 'Address', dataIndex: 'address', width: 100 },
])

const sources = tableSourcesDefiner([
  { name: 'Alice', age: 36, homeTelephone: '0574-86081869', mobileTelephone: '18212951391', address: 'NingBo' },
  { name: 'Mary', age: 22, homeTelephone: '0580-86083878', mobileTelephone: '', address: 'ZhouShan' },
  { name: 'John', age: 22, homeTelephone: '0580-86081257', mobileTelephone: '', address: 'ZhouShan' },
])

const customBodyerCellRender = tableCustomBodyerCellRenderDefiner(option => {
  if (option.column.key == 'age' && option.record.name == 'Mary') {
    return {
      props: { rowSpan: 2 },
    }
  }

  if (option.column.key == 'homeTelephone' && option.record.name == 'Mary') {
    return {
      props: { colSpan: 2 },
    }
  }

  if (option.column.key == 'homeTelephone' && option.record.name == 'John') {
    return {
      props: { colSpan: 2 },
    }
  }

  return {
    props: { colSpan: 1 }, // 消除 column colSpan: 2 带来的影响
  }
})
</script>

表格数据源变更

表格数据源变更

为了提升表格性能, 表格数据源在渲染之初进行了缓存，后续进行新增或删除，可能并不会按新数据源渲染。我们需要 STable update API 通知表格更新数据源，并进行渲染

序号	姓名	年龄	爱好	操作
1	Alice	36	骑车
2	Mary	22	游泳
3	John	27	音乐

复制代码

显示代码

<template>
  <ASpace
    :size="15"
    :wrap="true"
    style="width: 100%; margin: 0"
    direction="vertical"
  >
    <AButton @click="doAdd">
      新增
    </AButton>

    <STable
      ref="table"
      :columns="columns"
      :sources="sources"
    >
      <template #bodyerCell="{ column, record, groupIndex }">
        <template v-if="column.key == 'serial'">
          {{ groupIndex + 1 }}
        </template>

        <template v-if="column.key == 'action'">
          <AButton
            danger
            type="link"
            @click="doDelete(record)"
          >
            删除
          </AButton>
        </template>
      </template>
    </STable>
  </ASpace>
</template>

<script setup lang="ts">
let index = 0

const table = ref(null as InstanceType<STable> | null)

const columns = tableColumnsDefiner([
  { title: '序号', dataIndex: 'serial', align: 'center', width: 60 },
  { title: '姓名', dataIndex: 'name', align: 'center' },
  { title: '年龄', dataIndex: 'age', align: 'center' },
  { title: '爱好', dataIndex: 'like', align: 'center' },
  { title: '操作', dataIndex: 'action', align: 'center' },
])

const sources = tableSourcesDefiner([
  { name: 'Alice', age: 36, like: '骑车' },
  { name: 'Mary', age: 22, like: '游泳' },
  { name: 'John', age: 27, like: '音乐' },
])

const doAdd = () => {
  index++

  sources.value.push({
    name: `新增一员 +${index}`,
    like: `爱好 +${index}`,
    age: 30,
  })

  // 当使用 Array.push 时，必须使用 update(true)
  table.value?.update(true)
}

const doDelete = (record: any) => {
  // 如果是直接修改 sources 引用，则无需 update(true)
  sources.value = sources.value.filter(source => {
    return source !== record
  })
}
</script>

固定表头和某列

固定表头和某列

通过 sticky 可以配置表格 thead 和 summarys(tfoot) 置顶/置底吸附固定，同时通过设置 column.fixed 来固定某列或者某些列。

第一种 (表格 Footer 横向滚动)

学生	语文	数学	技术	英语	物理	政治	化学	历史	生物学	地理	总分
Alice	99	81	80	90	86	91	81	99	87	91	885
Mary	88	97	91	86	88	96	95	87	81	80	889
John	91	86	83	85	89	90	84	87	89	83	867
Betty	80	85	93	90	82	81	96	95	92	90	884
Carol	87	99	91	92	92	88	86	90	91	86	902
Zora	83	91	90	91	99	82	93	91	90	90	900
Jude	93	82	87	96	87	88	82	92	85	88	880
Kim	93	91	86	86	81	91	87	93	83	91	882
Astrid	97	89	85	80	80	89	88	84	87	84	863
Colin	85	97	84	81	80	99	83	86	90	94	879
平均分	89.6	89.8	87.0	87.7	86.4	89.5	87.5	90.4	87.5	87.7	883.1

第二种 (表格 Footer 横向固定)

学生	语文	数学	技术	英语	物理	政治	化学	历史	生物学	地理	总分
Alice	99	81	80	90	86	91	81	99	87	91	885
Mary	88	97	91	86	88	96	95	87	81	80	889
John	91	86	83	85	89	90	84	87	89	83	867
Betty	80	85	93	90	82	81	96	95	92	90	884
Carol	87	99	91	92	92	88	86	90	91	86	902
Zora	83	91	90	91	99	82	93	91	90	90	900
Jude	93	82	87	96	87	88	82	92	85	88	880
Kim	93	91	86	86	81	91	87	93	83	91	882
Astrid	97	89	85	80	80	89	88	84	87	84	863
Colin	85	97	84	81	80	99	83	86	90	94	879
说明	随机抽样, 共计 10 名学生, 该学期平均总分: 883.1										Good!

复制代码

显示代码

<template>
  <div class="container">
    <div style="width: 100%;">
      <div style="width: 100%; height: 44px; font-size: 14px; font-weight: 600; line-height: 44px;">
        第一种 (表格 Footer 横向滚动)
      </div>

      <div style="width: 100%; height: 300px; overflow: auto">
        <STable
          :border="true"
          :sticky="sticky"
          :scroll="scroll"
          :columns="columns"
          :sources="sources"
          :summarys="summarys"
          :customBodyerCellRender="customBodyerCellRender"
          :customFooterCellRender="customFooterCellRender1"
          tableLayout="auto"
        />
      </div>
    </div>

    <div style="width: 100%; margin-top: 30px;">
      <div style="width: 100%; height: 44px; font-size: 14px; font-weight: 600; line-height: 44px;">
        第二种 (表格 Footer 横向固定)
      </div>

      <div style="width: 100%; height: 300px; overflow: auto">
        <STable
          :border="true"
          :sticky="sticky"
          :scroll="scroll"
          :columns="columns"
          :sources="sources"
          :summarys="summarys"
          :customBodyerCellRender="customBodyerCellRender"
          :customFooterCellRender="customFooterCellRender2"
          tableLayout="auto"
        >
          <template #footerCell="{ column, value, scroller }">
            <template v-if="column.colIndex === 1">
              <div :style="{ transform: `translateX(${scroller.left}px` }">
                {{ value }}
              </div>
            </template>
          </template>
        </STable>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const sticky = tableStickyDefiner({
  topHeader: true, // 置顶吸附
  bottomFooter: true, // 置底吸附
})

const scroll = tableScrollDefiner({
  x: 'max-content',
  overflow: 'visible',
})

const columns = tableColumnsDefiner([
  { title: '学生', dataIndex: 'student', align: 'center', width: 100, fixed: 'left' },
  { title: '语文', dataIndex: 'language', align: 'center', minWidth: 90 },
  { title: '数学', dataIndex: 'math', align: 'center', minWidth: 90 },
  { title: '技术', dataIndex: 'technology', align: 'center', minWidth: 90 },
  { title: '英语', dataIndex: 'english', align: 'center', minWidth: 90 },
  { title: '物理', dataIndex: 'physical', align: 'center', minWidth: 90 },
  { title: '政治', dataIndex: 'politics', align: 'center', minWidth: 90 },
  { title: '化学', dataIndex: 'chemistry', align: 'center', minWidth: 90 },
  { title: '历史', dataIndex: 'history', align: 'center', minWidth: 90 },
  { title: '生物学', dataIndex: 'biology', align: 'center', minWidth: 90 },
  { title: '地理', dataIndex: 'geography', align: 'center', minWidth: 90 },
  { title: '总分', dataIndex: 'total', align: 'center', width: 90, fixed: 'right' },
])

const sources = tableSourcesDefiner([
  { student: 'Alice', language: 99, math: 81, technology: 80, english: 90, physical: 86, politics: 91, chemistry: 81, history: 99, biology: 87, geography: 91 },
  { student: 'Mary', language: 88, math: 97, technology: 91, english: 86, physical: 88, politics: 96, chemistry: 95, history: 87, biology: 81, geography: 80 },
  { student: 'John', language: 91, math: 86, technology: 83, english: 85, physical: 89, politics: 90, chemistry: 84, history: 87, biology: 89, geography: 83 },
  { student: 'Betty', language: 80, math: 85, technology: 93, english: 90, physical: 82, politics: 81, chemistry: 96, history: 95, biology: 92, geography: 90 },
  { student: 'Carol', language: 87, math: 99, technology: 91, english: 92, physical: 92, politics: 88, chemistry: 86, history: 90, biology: 91, geography: 86 },
  { student: 'Zora', language: 83, math: 91, technology: 90, english: 91, physical: 99, politics: 82, chemistry: 93, history: 91, biology: 90, geography: 90 },
  { student: 'Jude', language: 93, math: 82, technology: 87, english: 96, physical: 87, politics: 88, chemistry: 82, history: 92, biology: 85, geography: 88 },
  { student: 'Kim', language: 93, math: 91, technology: 86, english: 86, physical: 81, politics: 91, chemistry: 87, history: 93, biology: 83, geography: 91 },
  { student: 'Astrid', language: 97, math: 89, technology: 85, english: 80, physical: 80, politics: 89, chemistry: 88, history: 84, biology: 87, geography: 84 },
  { student: 'Colin', language: 85, math: 97, technology: 84, english: 81, physical: 80, politics: 99, chemistry: 83, history: 86, biology: 90, geography: 94 },
])

const summarys = tableSummarysDefiner([
  { student: '平均分' },
])

const customBodyerCellRender = tableCustomBodyerCellRenderDefiner(option => {
  if (option.column.key === 'total') {
    return {
      children: (
        option.record.language +
        option.record.math +
        option.record.technology +
        option.record.english +
        option.record.physical +
        option.record.politics +
        option.record.chemistry +
        option.record.history +
        option.record.biology +
        option.record.geography
      ),
    }
  }
})

const customFooterCellRender1 = tableCustomFooterCellRenderDefiner(option => {
  if (option.column.key === 'student') {
    return {
      attrs: {
        style: { fontWeight: '600', backgroundColor: '#f9f9f9' },
      },
    }
  }

  const total = sources.value.reduce((total, item: any) => {
    if (option.column.key !== 'total') {
      return total + item[option.column.key]
    }

    return (
      total +
      item.language +
      item.math +
      item.technology +
      item.english +
      item.physical +
      item.politics +
      item.chemistry +
      item.history +
      item.biology +
      item.geography
    )
  }, 0)

  return {
    attrs: {
      style: { backgroundColor: '#f9f9f9' },
    },
    children: (total / sources.value.length).toFixed(1),
  }
})

const customFooterCellRender2 = tableCustomFooterCellRenderDefiner(option => {
  if (option.column.key === 'student') {
    return {
      attrs: {
        style: { fontWeight: '600', backgroundColor: '#f9f9f9' },
      },
      children: '说明',
    }
  }

  if (option.column.key === 'total') {
    return {
      attrs: {
        style: { color: '#f34d4d', fontWeight: '600', backgroundColor: '#f9f9f9' },
      },
      children: 'Good!',
    }
  }

  if (option.colIndex === 1) {
    const total = sources.value.reduce((total, item: any) => {
      return (
        total +
        item.language +
        item.math +
        item.technology +
        item.english +
        item.physical +
        item.politics +
        item.chemistry +
        item.history +
        item.biology +
        item.geography
      )
    }, 0)

    return {
      attrs: {
        style: { paddingLeft: '20px', backgroundColor: '#f9f9f9' },
      },
      props: {
        align: 'left',
        colSpan: 10,
      },
      children: `随机抽样, 共计 ${sources.value.length} 名学生, 该学期平均总分: ${(total / sources.value.length).toFixed(1)}`,
    }
  }
})
</script>

随页面滚动固定表头

随页面滚动固定表头

sticky topHeader 设置 Table thead 页面置顶吸附

sticky bottomFooter 设置 Table tfoot 页面置底吸附

注: STable 借助于一个原生 Table + CSS (position: sticky) 只能对一个滚动区域进行吸附固定

学生	语文	数学	英语	总分
Alice	99	81	90	270
Mary	88	97	86	271
John	91	86	85	262
Betty	80	85	90	255
Carol	87	99	92	278
Zora	83	91	91	265
Jude	93	82	96	271
Kim	93	91	86	270
Astrid	97	89	80	266
Colin	85	97	81	263
平均分	89.6	89.8	87.7	267.1

复制代码

显示代码

<template>
  <STable
    :border="true"
    :sticky="sticky"
    :scroll="scroll"
    :columns="columns"
    :sources="sources"
    :summarys="summarys"
    :customBodyerCellRender="customBodyerCellRender"
    :customFooterCellRender="customFooterCellRender"
    tableLayout="auto"
  />
</template>

<script setup lang="ts">
const sticky = tableStickyDefiner({
  topHeader: 65, // 置顶吸附
  bottomFooter: true, // 置底吸附
})

const scroll = tableScrollDefiner({
  x: 'max-content',
  overflow: 'visible',
})

const columns = tableColumnsDefiner([
  { title: '学生', dataIndex: 'student', align: 'center', width: 100 },
  { title: '语文', dataIndex: 'language', align: 'center' },
  { title: '数学', dataIndex: 'math', align: 'center' },
  { title: '英语', dataIndex: 'english', align: 'center' },
  { title: '总分', dataIndex: 'total', align: 'center' },
])

const sources = tableSourcesDefiner([
  { student: 'Alice', language: 99, math: 81, english: 90 },
  { student: 'Mary', language: 88, math: 97, english: 86 },
  { student: 'John', language: 91, math: 86, english: 85 },
  { student: 'Betty', language: 80, math: 85, english: 90 },
  { student: 'Carol', language: 87, math: 99, english: 92 },
  { student: 'Zora', language: 83, math: 91, english: 91 },
  { student: 'Jude', language: 93, math: 82, english: 96 },
  { student: 'Kim', language: 93, math: 91, english: 86 },
  { student: 'Astrid', language: 97, math: 89, english: 80 },
  { student: 'Colin', language: 85, math: 97, english: 81 },
])

const summarys = tableSummarysDefiner([
  { student: '平均分' },
])

const customBodyerCellRender = tableCustomBodyerCellRenderDefiner(option => {
  if (option.column.key === 'total') {
    return {
      children: (
        option.record.language +
        option.record.math +
        option.record.english
      ),
    }
  }
})

const customFooterCellRender = tableCustomFooterCellRenderDefiner(option => {
  if (option.column.key === 'student') {
    return {
      attrs: {
        style: { fontWeight: '600', backgroundColor: '#f9f9f9' },
      },
    }
  }

  const total = sources.value.reduce((total, item: any) => {
    if (option.column.key !== 'total') {
      return total + item[option.column.key]
    }

    return (
      total +
      item.language +
      item.math +
      item.english
    )
  }, 0)

  return {
    attrs: {
      style: { backgroundColor: '#f9f9f9' },
    },
    children: (total / sources.value.length).toFixed(1),
  }
})
</script>

表格单元格编辑

表格单元格编辑

表格单元格编辑，主要借助 SEditCell 实现，了解更多 -> SEditCell

输入框	选择框	文本框	操作
输入值	Alva	输入文本

复制代码

显示代码

<template>
  <STable
    ref="table"
    v-model:columns="columns"
    v-model:sources="sources"
    tableLayout="auto"
    :scroll="scroll"
  >
    <template #bodyerCell="{ column, record }">
      <template v-if="column.key === 'input'">
        <SEditCellInput
          v-model:text="record.input"
          empty="未输入"
          :edit="edit"
          :check="check"
          :opened="opened"
          :allowClear="true"
          :cellStyle="cellStyle"
        />
      </template>

      <template v-if="column.key === 'select'">
        <SEditCellSelect
          v-model:text="record.select"
          empty="未选择"
          :edit="edit"
          :check="check"
          :opened="opened"
          :allowClear="true"
          :cellStyle="cellStyle"
          :options="selectOptions"
        />
      </template>

      <template v-if="column.key === 'textarea'">
        <SEditCellTextarea
          v-model:text="record.textarea"
          empty="未输入"
          :edit="edit"
          :check="check"
          :opened="opened"
          :allowClear="true"
          :cellStyle="cellStyle"
        />
      </template>

      <template v-if="column.key === 'action'">
        <AButton
          type="link"
          @click="opened = !opened"
        >
          <template #icon>
            <EditOutlined v-if="!opened" />
            <CheckOutlined v-if="opened" />
          </template>
        </AButton>
      </template>
    </template>
  </STable>
</template>

<script setup lang="ts">
const table = ref(null as InstanceType<STable> | null)

const columns = tableColumnsDefiner([
  {
    title: '输入框',
    dataIndex: 'input',
  },
  {
    title: '选择框',
    dataIndex: 'select',
  },
  {
    title: '文本框',
    dataIndex: 'textarea',
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    width: 80,
  },
])

const sources = tableSourcesDefiner([
  {
    input: '输入值',
    select: 'alva',
    textarea: '输入文本',
  },
])

const scroll = tableScrollDefiner({
  x: 'max-content',
  y: 'auto',
})

const selectOptions = ref([
  {
    value: 'alva',
    label: 'Alva',
  },
  {
    value: 'jack',
    label: 'Jack',
  },
  {
    value: 'lucy',
    label: 'Lucy',
  },
])

const opened = ref(false)
const check = ref(false)
const edit = ref(false)

const cellStyle = {
  container: {
    display: 'inline-block',
    width: 'auto',
  },
  inputWrapper: {
    display: 'inline-block',
    paddingRight: '0',
    width: '150px',
  },
  textWrapper: {
    display: 'inline-block',
    paddingRight: '0',
    width: '150px',
  },
}
</script>

表格单选/多选

表格单选/多选

表格单选和多选 可以通过 selectedRowMode 设置为 Checkbox 或 Radio 来启用，同时在进行切换分页时可以使用 preserveSelectedRowKeys 来保持之前的选中项，如果有禁用 Checkbox / Radio 的需求，则可以使用 customBodyerRowStates 来实现

preserve

模式

Checkbox

手动选择

	Name	Age	Like	Email
暂无数据

• 第 0-0 条 (共 0 条)
• 1

复制代码

显示代码

<template>
  <div class="container">
    <div style="width: 100%; margin: 0 0 10px;">
      <div style="display: inline-block; margin: 0 8px 16px 0">
        preserve
      </div>

      <ASwitch v-model:checked="preserveSelectedRowKeys">
        <template #checkedChildren>
          <CheckOutlined />
        </template>
        <template #unCheckedChildren>
          <CloseOutlined />
        </template>
      </ASwitch>

      <div style="display: inline-block; margin: 0 8px 16px 35px">
        模式
      </div>

      <ASelect
        v-model:value="selectedRowMode"
        style="width: 110px;"
        :options="options"
      />

      <template v-if="selectedRowMode === 'Checkbox'">
        <div style="display: inline-block; margin: 0 8px 16px 35px">
          手动选择
        </div>

        <AButton @click="table?.select(['key3', 'key5', 'key6', 'key7'])">
          3 / 5 / 6 / 7
        </AButton>
      </template>
    </div>

    <STable
      ref="table"
      v-model:columns="columns"
      v-model:paginate="paginate"
      v-model:selectedRowKeys="selectedRowKeys"
      :preserveSelectedRowKeys="preserveSelectedRowKeys"
      :customBodyerRowStates="customBodyerRowStates"
      :selectedRowMode="selectedRowMode"
      :loadData="loadData"
      :immediate="true"
      rowKey="id"
    />
  </div>
</template>

<script setup lang="ts">
const columns = tableColumnsDefiner([
  { title: 'Name', dataIndex: 'name' },
  { title: 'Age', dataIndex: 'age' },
  { title: 'Like', dataIndex: 'like' },
  { title: 'Email', dataIndex: 'email' },
])

const paginate = tablePaginateDefiner({
  pageNo: 1,
  pageSize: 5,
  totalPage: 0,
  totalSize: 0,
  showSizeChanger: false,
  showTotal: true,
  visible: true,
  fixed: true,
})

const loadData = tableLoadDataDefiner(options => {
  // 模拟 800ms 后，获取接口数据
  const promise = new Promise(resolve => {
    setTimeout(resolve, 800)
  })

  if (options.paginate.pageNo === 1) {
    return promise.then(() => {
      return {
        code: '0000',
        message: null,
        result: {
          data: [
            { id: 'key1', name: 'Alice', age: 36, like: 'Cycling', email: 'alice@gmail.com' },
            { id: 'key2', name: 'Mary', age: 22, like: 'Swim', email: 'mary@gmail.com' },
            { id: 'key3', name: 'John', age: 27, like: 'Music', email: 'john@gmail.com' },
            { id: 'key4', name: 'Tim', age: 19, like: 'IT', email: 'tim@gmail.com' },
            { id: 'key5', name: 'David', age: 24, like: 'Draw', email: 'david@gmail.com' },
          ],
          pageNo: 1,
          pageSize: 5,
          totalPage: 2,
          totalSize: 9,
        },
      }
    })
  }

  if (options.paginate.pageNo === 2) {
    return promise.then(() => {
      return {
        code: '0000',
        message: null,
        result: {
          data: [
            { id: 'key6', name: 'George', age: 21, like: 'History', email: 'george@gmail.com' },
            { id: 'key7', name: 'Peter', age: 22, like: 'Draw', email: 'peter@gmail.com' },
            { id: 'key8', name: 'Eric', age: 31, like: 'Cycling', email: 'eric@gmail.com' },
            { id: 'key9', name: 'Larry', age: 22, like: 'Music', email: 'larry@gmail.com' },
          ],
          pageNo: 2,
          pageSize: 5,
          totalPage: 2,
          totalSize: 9,
        },
      }
    })
  }

  return {
    code: '0000',
    message: null,
    result: {
      data: [],
      pageNo: 1,
      pageSize: 5,
      totalPage: 0,
      totalSize: 0,
    },
  }
})

const customBodyerRowStates = tableCustomBodyerRowStatesDefiner(options => {
  if (options.record.id === 'key3' || options.record.id === 'key7') {
    return {
      selectable: false, // 可以定义 selectable=ref(false) 来引用，这样可以通过 selectable.value 动态修改
    }
  }
})

const table = ref(null as InstanceType<STable> | null)
const selectedRowMode = ref<'Checkbox' | 'Radio' | 'None'>('Checkbox')
const selectedRowKeys = ref<string[]>(['key2', 'key3', 'key9'])
const preserveSelectedRowKeys = ref(true)

const options = [
  { label: 'Checkbox', value: 'Checkbox' },
  { label: 'Radio', value: 'Radio' },
  { label: 'None', value: 'None' },
]
</script>

表格树形数据

表格树形数据

STable 支持树形数据的展示, 当数据中有 children 字段时会自动展示为树形表格。

rowSelectedStrictly="true" (默认 true), 说明父子数据 CheckBox 状态不再关联
treeKey="list" (默认 children), 使用树形数据 list 字段作为渲染子节点依据

rowSelectedStrictly

	Name	Age	Email
	Alice	36	alice@gmail.com
	Mary	22	mary@gmail.com
	Mary-1	22	mary@gmail.com
	Mary-2	22	mary@gmail.com
	Mary-2-1	22	mary@gmail.com
	Mary-2-2	22	mary@gmail.com
	Mary-2-3	22	mary@gmail.com
	Mary-3	22	mary@gmail.com
	John	27	john@gmail.com
	Tim	19	tim@gmail.com
	David	24	david@gmail.com

复制代码

显示代码

<template>
  <div class="container">
    <div style="width: 100%; margin: 0 0 10px;">
      <div style="display: inline-block; margin: 0 8px 16px 0">
        rowSelectedStrictly
      </div>

      <ASwitch v-model:checked="rowSelectedStrictly">
        <template #checkedChildren>
          <CheckOutlined />
        </template>
        <template #unCheckedChildren>
          <CloseOutlined />
        </template>
      </ASwitch>
    </div>

    <STable
      ref="table"
      v-model:columns="columns"
      v-model:sources="sources"
      :rowSelectedStrictly="rowSelectedStrictly"
      :customBodyerRowStates="customBodyerRowStates"
      :selectedRowMode="selectedRowMode"
      :expandedRowKeys="expandedRowKeys"
      treeKey="list"
      rowKey="id"
    />
  </div>
</template>

<script setup lang="ts">
const columns = tableColumnsDefiner([
  { title: 'Name', dataIndex: 'name' },
  { title: 'Age', dataIndex: 'age' },
  { title: 'Email', dataIndex: 'email' },
])

const sources = tableSourcesDefiner([
  {
    id: 'key-alice',
    name: 'Alice',
    age: 36,
    email: 'alice@gmail.com',
    list: [
      {
        id: 'key-alice-1',
        name: 'Alice-1',
        age: 36,
        email: 'Alice@gmail.com',
      },
      {
        id: 'key-alice-2',
        name: 'Alice-2',
        age: 36,
        email: 'Alice-2@gmail.com',
      },
      {
        id: 'key-alice-3',
        name: 'Alice-3',
        age: 36,
        email: 'Alice-3@gmail.com',
      },
    ],
  },
  {
    id: 'key-mary',
    name: 'Mary',
    age: 22,
    email: 'mary@gmail.com',
    list: [
      {
        id: 'key-mary-1',
        name: 'Mary-1',
        age: 22,
        email: 'mary@gmail.com',
      },
      {
        id: 'key-mary-2',
        name: 'Mary-2',
        age: 22,
        email: 'mary@gmail.com',
        list: [
          {
            id: 'key-mary-2-1',
            name: 'Mary-2-1',
            age: 22,
            email: 'mary@gmail.com',
          },
          {
            id: 'key-mary-2-2',
            name: 'Mary-2-2',
            age: 22,
            email: 'mary@gmail.com',
          },
          {
            id: 'key-mary-2-3',
            name: 'Mary-2-3',
            age: 22,
            email: 'mary@gmail.com',
          },
        ],
      },
      {
        id: 'key-mary-3',
        name: 'Mary-3',
        age: 22,
        email: 'mary@gmail.com',
      },
    ],
  },
  {
    id: 'key-john',
    name: 'John',
    age: 27,
    email: 'john@gmail.com',
    list: [
      {
        id: 'key-john-1',
        name: 'John-1',
        age: 22,
        email: 'john@gmail.com',
      },
      {
        id: 'key-john-2',
        name: 'John-2',
        age: 22,
        email: 'john@gmail.com',
        list: [
          {
            id: 'key-john-2-1',
            name: 'John-2-1',
            age: 22,
            email: 'john@gmail.com',
          },
          {
            id: 'key-john-2-2',
            name: 'John-2-2',
            age: 22,
            email: 'john@gmail.com',
          },
          {
            id: 'key-john-2-3',
            name: 'John-2-3',
            age: 22,
            email: 'john@gmail.com',
          },
        ],
      },
      {
        id: 'key-john-3',
        name: 'John-3',
        age: 22,
        email: 'john@gmail.com',
      },
    ],
  },
  {
    id: 'key-tim',
    name: 'Tim',
    age: 19,
    email: 'tim@gmail.com',
  },
  {
    id: 'key-david',
    name: 'David',
    age: 24,
    email: 'david@gmail.com',
  },
])

const expandedRowKeys = ref(['key-mary', 'key-mary-2'])

const customBodyerRowStates = tableCustomBodyerRowStatesDefiner(options => {
  if (['key-mary-2', 'key-mary-3'].includes(options.record.id)) {
    return {
      selectable: false,
    }
  }
})

const selectedRowMode = ref<'Checkbox'>('Checkbox')
const rowSelectedStrictly = ref(true)
</script>

表格行展开项

表格行展开项

当表格内容不能完全展示时，STable 支持通过 expander 卡槽，定义表格行展开项的内容。如果有禁用行展开项的需求，则可以使用在 customBodyerRowStates 中实现。

Name	Age	Email
Alice	36	alice@gmail.com
这里显示 Alice 用户信息: 年龄 36, 邮箱 alice@gmail.com。
Mary	22	mary@gmail.com
John	27	john@gmail.com
Tim	19	tim@gmail.com
David	24	david@gmail.com

复制代码

显示代码

<template>
  <STable
    ref="table"
    v-model:columns="columns"
    v-model:sources="sources"
    v-model:expandedRowKeys="expandedRowKeys"
    :customBodyerRowStates="customBodyerRowStates"
    rowKey="id"
    border
  >
    <template #expander="{ record }">
      <template v-if="record.id === 'key-alice' || record.id === 'key-mary' || record.id === 'key-john'">
        这里显示 {{ record.name }} 用户信息: 年龄 {{ record.age }}, 邮箱 {{ record.email }}。
      </template>
    </template>
  </STable>
</template>

<script setup lang="ts">
const columns = tableColumnsDefiner([
  { title: 'Name', dataIndex: 'name' },
  { title: 'Age', dataIndex: 'age' },
  { title: 'Email', dataIndex: 'email' },
])

const sources = tableSourcesDefiner([
  {
    id: 'key-alice',
    name: 'Alice',
    age: 36,
    email: 'alice@gmail.com',
  },
  {
    id: 'key-mary',
    name: 'Mary',
    age: 22,
    email: 'mary@gmail.com',
  },
  {
    id: 'key-john',
    name: 'John',
    age: 27,
    email: 'john@gmail.com',
  },
  {
    id: 'key-tim',
    name: 'Tim',
    age: 19,
    email: 'tim@gmail.com',
  },
  {
    id: 'key-david',
    name: 'David',
    age: 24,
    email: 'david@gmail.com',
  },
])

const expandedRowKeys = ref(['key-alice'])

const customBodyerRowStates = tableCustomBodyerRowStatesDefiner(options => {
  if (['key-mary'].includes(options.record.id)) {
    return {
      expandable: false, // 可以定义 expandable=ref(false) 来引用，这样可以通过 expandable.value 动态修改
    }
  }
})
</script>

API

Props

STable Props

参数	说明	类型	默认值
size	表格大小	STableSize	-
rowKey	表格行 key 的字段	STableRowKey	-
treeKey	表格 树形结构 的字段	STableTreeKey	'children'
border	设置边框。分组表头时 border="true"	boolean	false
sticky	设置表格粘性头部和滚动条，详见下方 STable Sticky	STableStickyType	-
scroll	表格是否可滚动，也可以指定滚动区域的宽高，详见 STable Scroll	STableScrollType	-
columns (v-model)	表格列的配置描述, 详见 STable Column	STableColumnType[]	-
sources (v-model)	表格数据源	STableRecordType[]	-
summarys (v-model)	表格总结栏数据源 (tfoot)	STableRecordType[]	-
paginate (v-model)	表格分页配置，详见 STable Paginate	STablePartPaginate	-
loadData	表格数据远程加载，响应数据预处理，详见 Responser	STableLoadSource	-
tableLayout	表格 CSS table-layout 样式	'auto' | 'fixed'	-
persistSourceRanges	保持数据渲染，即使不在可视区域内。	Array<number[]> | boolean	false
customHeaderRowAttrs	设置表格 thead 行属性 (HTMLAttributes)	STableCustom HeaderRowAttrs	-
customBodyerRowAttrs	设置表格 tbody 行属性 (HTMLAttributes)	STableCustom BodyerRowAttrs	-
customFooterRowAttrs	设置表格 tfoot 行属性 (HTMLAttributes)	STableCustom FooterRowAttrs	-
customBodyerRowStates	设置表格 tbody 行 State (例如，禁用行展开、禁用选项)	STableCustom BodyerRowStates	-
customHeaderCellRender	自定义 thead 单元格渲染	STableHeader CellRender	-
customBodyerCellRender	自定义 tbody 单元格渲染	STableBodyer CellRender	-
customFooterCellRender	自定义 tfoot 单元格渲染	STableFooter CellRender	-
defaultColumnSorters	设置默认的列排序	STableSorterType[]	[]
defaultSelectAllRows	默认选择所有表格行 key (Checkbox)	boolean	false
defaultExpandAllRows	默认展开所有表格行 key (Expanded)	boolean	false
preserveSelectedRowKeys	分页渲染数据，是否记录之前选择的 Checkbox/Radio，以便后续恢复	boolean	false
preserveExpandedRowKeys	分页渲染数据，是否记录之前展开的行，以便后续恢复	boolean	false
columnPresetResizable	是否允许表格列拉伸调整宽度	boolean	false
columnPresetDraggable	是否允许表格列拖拽，调整表格列顺序	boolean	false
columnSorterMultiple	是否允许表格多列排序	boolean	false
columnPresetSettings	是否启用表格列筛选配置	boolean	false
rowSelectedStrictly	表格树形数据，父子数据 CheckBox 状态是否不关联 (默认不关联)	boolean	true
rowExpandedByClick	当表格存在展开行时，是否允许点击行展开其展开行	boolean	false
cellMegreNormalize	当表格存在合并单元格时，可以帮助我们自动适配相邻的单元格情况	boolean	true
expandIndentSize	因展开行图标，每一层的缩紧样式	number	-
selectIndentSize	因选择项图标，每一层的缩紧样式	number	-
selectedRowMode	是否启用选择框 (Checkbox / Radio)	'Radio' | 'Checkbox' | 'None'	'None '
selectedRowKeys (v-model)	记录表格已选择的行 key	STableKey[]	[]
expandedRowKeys (v-model)	记录表格已展开的行 key	STableKey[]	[]
tHeaderThStyle	设置表格 thead th 样式	Record<string, any>	{}
tBodyerTdStyle	设置表格 tbody td 样式	Record<string, any>	{}
tFooterTdStyle	设置表格 tfoot td 样式	Record<string, any>	{}
expandTdStyle	设置表格展开行 expand td 样式	Record<string, any>	{}
paginateStyle	设置表格分页容器样式	Record<string, any>	{}
loadOnScroll	仅在 paginate.mode="local" 启用，滚动加载分页数据	boolean	false
bodyMinRows	表格最小行数，值为 true 时，与分页 pageSize 保持一致	boolean | number	false
showHeader	显示表格 head 部分 (thead)	boolean	true
showBodyer	显示表格 body 部分 (tbody)	boolean	true
showFooter	显示表格 foot 部分 (tfoot)	boolean	true
immediate	是否立刻调用 loadData, 加载远程数据	boolean	true
loadinger	是否在 UI 上隐藏 loading, 即使 loading 值为 true	boolean	true
loading (v-model)	表格是否正在加载数据中	boolean	false
virtual	表格启用虚拟列表，提升性能 (目前尚未启用)	boolean	true

STable Sticky

参数	说明	类型	默认值
topHeader	启用表格 thead 置顶吸附	boolean | number	true
leftFooter	当表格某些列左侧固定时，滚动时 tfoot 是否也随之固定	boolean | number	true
rightFooter	当表格某些列右侧固定时，滚动时 tfoot 是否也随之固定	boolean | number	true
bottomFooter	启用表格 tfoot 置底吸附	boolean | number	true
bottomScrollbar	当表格底部超出可视区域时，是否显示横向滚动条	boolean	false

STable Scroll

参数	说明	类型	默认值
x	设置横向滚动，指定滚动区域的宽	number | string | false	false
y	设置纵向滚动，指定滚动区域的高	number | string | false	false
overflow	设置滚动区域 overflow 属性	'hidden' | 'visible' | 'auto'	-
scrollToFirstOffsetX	表格滚动 x轴 横向方向偏移量	number	-
scrollToFirstOffsetY	表格滚动 y轴 纵向方向偏移量	number	-
scrollToFirstTargetX	指定表格滚动 x轴 初始位置	number	0
scrollToFirstTargetY	指定表格滚动 y轴 初始位置	number	0
scrollToFirstXOnChange	分页/排序/筛选，是否滚动到初始位置	boolean	true
scrollToFirstYOnChange	分页/排序/筛选，是否滚动到初始位置	boolean	true
getScrollResizeContainer	指定滚动区域 (祖先节点), 一般无需指定，自动获取	() => HTMLElement	-

STable Column

参数	说明	类型	默认值
key	表格列 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性	string	-
title	表格列 title 标题	string	-
dataIndex	列数据在数据项中对应的路径	string | string[]	-
children	表格嵌套的列选项	STablePartColumnType[]	-
align	设置表格列的对齐方式	'left' | 'center' | 'right'	-
fixed	设置表格列是否固定及其方式	'left' | 'right' | false	-
width	表格列宽度	number	-
minWidth	表格列最小宽度, 影响列 resizing (最小限制)	number	-
maxWidth	表格列最大宽度, 影响列 resizing (最大限制)	number	-
settings	表格列筛选配置项中该列的预设值	{ checkbox?: boolean; disabled?: boolean; }	-
resizable	配置表格该列 resizable?，覆盖 props.columnPresetResizable	boolean	-
ellipsis	表格单元格内容过长，自动省略	boolean	false
tooltip	表格单元格内容过长，自动省略，且 tooltip 提示	boolean	false
colSpan	表格单元格多列合并	number	-
rowSpan	表格单元格多行合并	number	-
sorter	表格该列是否启用排序	boolean	false
sorterField	表格该列排序时使用的字段，默认从 dataIndex 获取	string	-
expandIcon	如果有树形数据或展开行内容，是否在表格该列显示 Expand Icon	boolean	-
customHeaderCellRender	自定义 thead 单元格渲染，覆盖 props.customHeaderCellRender	STableHeaderCellRender	-
customBodyerCellRender	自定义 tbody 单元格渲染，覆盖 props.customBodyerCellRender	STableBodyerCellRender	-
customFooterCellRender	自定义 tfoot 单元格渲染，覆盖 props.customFooterCellRender	STableFooterCellRender	-

STable Paginate

参数	说明	类型	默认值
hideOnSinglePage	只有一页时是否隐藏分页器	boolean	false
defaultPageSize	默认的每页条数	number	20
pageSizeOptions	指定每页可以显示多少条	string[]	-
showSizeChanger	是否展示 pageSize 切换器	boolean	-
showQuickJumper	是否可以快速跳转至某页	boolean	false
showLessItems	是否显示较少页面内容	boolean	false
loadTotalSize	分段加载数据的总条目 (仅 mode="local")	number	-
loadTotalPage	分段加载数据的总页数 (仅 mode="local")	number	-
loadPageSize	分段加载数据的每页条目 (仅 mode="local")	number	-
loadPageNo	分段加载的当前最新页 (仅 mode="local")	number	-
showTotal	用于显示数据总量和当前数据顺序	boolean | (total, range) => void	-
totalSize	分页数据总条目	number	-
totalPage	分页数据总页数	number	-
pageSize	分页数据每页条目	number	-
pageNo	分页数据当前页	number	-
disabled	是否禁用表格分页	boolean	false
visible	是否显示表格分页	boolean	false
simple	是否显示为简单分页	boolean	false
fixed	表格分页在纵轴方向于底部吸附固定。	boolean	-
mode	分页模式，默认远程数据。(local 尚未启用)	'local' | 'remote'	'remote'

Emits

事件	说明	类型
pageSizeChange	pageSize 变化的回调	(pageNo: number, pageSize: number) => true
pageChange	页码或 pageSize 改变的回调	(pageNo: number, pageSize: number) => true
expand	表格行展开时触发	(keys: Array<STableKey>, records: Array<STableRecordType | null>) => true
select	表格行 Checkbox 或 Radio 选项变换时触发	(keys: Array<STableKey>, records: Array<STableRecordType | null>) => true
sorter	表格列排序变化时	(values: Array<STableSorterType>) => true

Slots

插槽名	插槽说明	插槽参数
expander	表格展开行内容 卡槽	record, rowIndex, groupIndex, groupLevel, groupIndexs, globalIndex
headerCell	表格 thead 单元格 卡槽	title, column, rowIndex, colIndex, paginater
bodyerCell	表格 tbody 单元格 卡槽	value, record, rowIndex, groupIndex, groupLevel, groupIndexs, globalIndex, column, colIndex, paginater
footerCell	表格 tfoot 单元格 卡槽	value, record, rowIndex, column, colIndex, sources, paginater

Expose

属性/方法名	说明描述	类型
reload	表格重新加载当前数据	(delay?: Promise<void> | boolean | number, force?: boolean) => Promise<void>
refresh	表格刷新加载第一页数据	(delay?: Promise<void> | boolean | number, force?: boolean) => Promise<void>
select	表格手动选择指定选项 (Checkbox / Radio)	(keys: STableKey[]) => void
expand	表格手动展开某些行 (仅对有展开内容或树形数据有效)	(keys: STableKey[]) => void
update	手动更新并重新渲染表格	(clean?: boolean) => void

Definer

定义	说明
tableSorterDefiner	定义 Props.defaultColumnSorters 时的 TypeScript 提示和校验
tableScrollDefiner	定义 Props.scroll 时的 TypeScript 提示和校验
tableStickyDefiner	定义 Props.sticky 时的 TypeScript 提示和校验
tableSourcesDefiner	定义 Props.sources 时的 TypeScript 提示和校验
tableSummarysDefiner	定义 Props.summarys 时的 TypeScript 提示和校验
tableColumnsDefiner	定义 Props.columns 时的 TypeScript 提示和校验
tablePaginateDefiner	定义 Props.paginate 时的 TypeScript 提示和校验
tableLoadDataDefiner	定义 Props.loadData 时的 TypeScript 提示和校验
tableResponserDefiner	定义 Props.loadData 数据源的预处理，详见 Responser
tableCustomHeaderRowAttrsDefiner	定义 Props.customHeaderRowAttrs 时的 TypeScript 提示和校
tableCustomBodyerRowAttrsDefiner	定义 Props.customBodyerRowAttrs 时的 TypeScript 提示和校
tableCustomFooterRowAttrsDefiner	定义 Props.customFooterRowAttrs 时的 TypeScript 提示和校
tableCustomBodyerRowStatesDefiner	定义 Props.customBodyerRowStates 时的 TypeScript 提示和校
tableCustomHeaderCellRenderDefiner	定义 Props.customHeaderCellRender 时的 TypeScript 提示和校
tableCustomBodyerCellRenderDefiner	定义 Props.customBodyerCellRender 时的 TypeScript 提示和校验
tableCustomFooterCellRenderDefiner	定义 Props.customFooterCellRender 时的 TypeScript 提示和校验
tableEmitSorterDefiner	定义 Emits.sorter 时的 TypeScript 提示和校验
tableEmitSelectDefiner	定义 Emits.select 时的 TypeScript 提示和校验
tableEmitExpandDefiner	定义 Emits.expand 时的 TypeScript 提示和校验
tableEmitPageChangeDefiner	定义 Emits.pageChange 时的 TypeScript 提示和校验
tableEmitPageSizeChangeDefiner	定义 Emits.pageSizeChange 时的 TypeScript 提示和校验

Responser

默认 - 预处理

/**
 * STable 默认支持如下响应数据
 *
 *    1. response: {
 *         result: {
 *           data: [], //数据源
 *           pageNo: 1, // 当前页数
 *           totalSize: 0, // 数据总条目
 *         }
 *       }
 *
 *
 *    2. response: {
 *         result: [] //数据源，没有分页
 *       }
 *
 *
 *    3. response: [] //数据源，没有分页
 *
 */

自定义 - 预处理

/**
 * 假设基于业务需求，STable 需要加载如下数据，则我们可以在 main.ts 全局自定义
 *
 *    response: {
 *      success: 'ok', // 'ok' 业务成功状态
 *      result: {
 *        pageSource: [...], //数据源
 *        pageCurrentNum: 1, // 当前页数
 *        pageTotalSize: 10, // 数据总条目
 *      }
 *    }
 */

tableResponserDefiner.interceptor = (response: any) => {
  if (response.success !== "ok") {
    return Promise.reject(response);
  }

  return {
    data: response.result.pageSource, // 数据源 -> 'data' 字段
    pageNo: response.result.pageCurrentNum, // 当前页数 -> 'pageNo' 字段
    totalSize: response.result.pageTotalSize, // 数据总条目 -> 'totalSize' 字段
  };
};