Table表格

用于展示行列数据

基础用法

Table 组件通过 data 属性接收需要渲染的表格数据数组。TableColumn 组件用于定义表格的列，其 prop 属性指定该列需要展示的数据对象的键名，label 属性则定义了该列的表头标题
zebra 来设置是否显示斑马条纹，border 来设置是否显示边框
可以使用 width 属性来定义列宽的，类型为 number，单位为 px
align 和 header-align 来定义对齐方式

ID	编程语言	得分	描述
1	Golang	100	Google 开发的静态强类型编译型语言
2	TypeScript	99	JavaScript 的超集，添加了类型系统
3	CSS	100	层叠样式表，用于描述 HTML 文档的呈现
4	JavaScript	95	广泛用于 Web 开发的脚本语言

vue

<template>
  <div class="p-4">
    <Table :data="data" select border zebra>
      <TableColumn type="expand">
        <template #expand="{ row }: TableColumnExpandScope<Language>">
          <div class="p-0">
            <p>
              {{ row.id }} : {{ row.name }} 是 {{ row.description }} 语言,它的得分是
              {{ row.score }}
            </p>
          </div>
        </template>
      </TableColumn>
      <TableColumn prop="id" label="ID" />
      <TableColumn prop="name" label="编程语言" />
      <TableColumn prop="score" label="得分" />
      <TableColumn prop="description" label="描述" :width="300" />
    </Table>
  </div>
</template>

<script setup lang="ts">
import { Table, TableColumn, type TableColumnExpandScope } from 'li-daisy'

import { ref } from 'vue'

interface Language {
  id: number
  name: string
  score: number
  description: string
}

const data = ref<Language[]>([
  {
    id: 1,
    name: 'Golang',
    score: 100,
    description: 'Google 开发的静态强类型编译型语言',
  },
  {
    id: 2,
    name: 'TypeScript',
    score: 99,
    description: 'JavaScript 的超集，添加了类型系统',
  },
  {
    id: 3,
    name: 'CSS',
    score: 100,
    description: '层叠样式表，用于描述 HTML 文档的呈现',
  },
  {
    id: 4,
    name: 'JavaScript',
    score: 95,
    description: '广泛用于 Web 开发的脚本语言',
  },
])
</script>

自定义表头

通过 TableColumn 下的 header 插槽来自定义表头，其内可以提取 label 和 prop 两个属性

ID - id	编程语言	得分
1	Golang	100
2	TypeScript	99
3	CSS	100
4	JavaScript	95

vue

<template>
  <div class="p-4">
    <Table :data="data">
      <TableColumn prop="id" label="ID">
        <template #header="{ label, prop }">
          <span class="font-bold text-info">{{ label }} - {{ prop }}</span>
        </template>
      </TableColumn>
      <TableColumn prop="name" label="编程语言" />
      <TableColumn prop="score" label="得分" />
    </Table>
  </div>
</template>

<script setup lang="ts">
import { Table, TableColumn } from 'li-daisy'
import { ref } from 'vue'

interface Language {
  id: number
  name: string
  score: number
}

const data = ref<Language[]>([
  { id: 1, name: 'Golang', score: 100 },
  { id: 2, name: 'TypeScript', score: 99 },
  { id: 3, name: 'CSS', score: 100 },
  { id: 4, name: 'JavaScript', score: 95 },
])
</script>

自定义列

通过 TableColumn 下的 default 插槽来自定义表头，其内可以提取 row 和 index 两个属性使用 TableColumnDefaultScope<type> 可以实现ts提示 ::demo table/column ::

固定表头

为 Table 设置高度后，y轴溢出即可体现固定表头的效果

ID	编程语言	得分
1	Golang	100
2	TypeScript	99
3	CSS	100
4	JavaScript	95
5	Python	98
6	Java	92
7	C#	90
8	Rust	96
9	PHP	85
10	Swift	93
11	Kotlin	94
12	Ruby	88

vue

<template>
  <div class="p-4">
    <Table class="h-[260px]" :data="data">
      <TableColumn prop="id" label="ID" :width="50" />
      <TableColumn prop="name" label="编程语言" />
      <TableColumn prop="score" label="得分" />
    </Table>
  </div>
</template>

<script setup lang="ts">
import { Table, TableColumn } from 'li-daisy'
import { ref } from 'vue'

interface Language {
  id: number
  name: string
  score: number
}

const data = ref<Language[]>([
  { id: 1, name: 'Golang', score: 100 },
  { id: 2, name: 'TypeScript', score: 99 },
  { id: 3, name: 'CSS', score: 100 },
  { id: 4, name: 'JavaScript', score: 95 },
  { id: 5, name: 'Python', score: 98 },
  { id: 6, name: 'Java', score: 92 },
  { id: 7, name: 'C#', score: 90 },
  { id: 8, name: 'Rust', score: 96 },
  { id: 9, name: 'PHP', score: 85 },
  { id: 10, name: 'Swift', score: 93 },
  { id: 11, name: 'Kotlin', score: 94 },
  { id: 12, name: 'Ruby', score: 88 },
])
</script>

固定列

通过设置 pin-col 来设置固定列位置，可选值有 left right
被设置了 pin-col 的TableColumn，其布局不再按照简单的先后顺序来排列，而是将 left 依次排在前列，right 依次排在后列
设置 select 之后，选择列默认为固定列

ID	编程语言	得分	描述
1	Golang	100	Google 开发的静态强类型编译型语言
2	TypeScript	99	JavaScript 的超集，添加了类型系统
3	CSS	100	层叠样式表，用于描述 HTML 文档的呈现
4	JavaScript	95	广泛用于 Web 开发的脚本语言

vue

<template>
  <div class="p-4">
    <Table :data="data" border>
      <TableColumn prop="id" label="ID" align="center" pin-col="left" :width="120" />
      <TableColumn prop="name" label="编程语言" :width="120" />
      <TableColumn prop="score" label="得分" :width="120" />
      <TableColumn prop="description" label="描述" :width="300" />
    </Table>
  </div>
</template>

<script setup lang="ts">
import { Table, TableColumn } from 'li-daisy'

import { ref } from 'vue'

interface Language {
  id: number
  name: string
  score: number
  description: string
}

const data = ref<Language[]>([
  {
    id: 1,
    name: 'Golang',
    score: 100,
    description: 'Google 开发的静态强类型编译型语言',
  },
  {
    id: 2,
    name: 'TypeScript',
    score: 99,
    description: 'JavaScript 的超集，添加了类型系统',
  },
  {
    id: 3,
    name: 'CSS',
    score: 100,
    description: '层叠样式表，用于描述 HTML 文档的呈现',
  },
  {
    id: 4,
    name: 'JavaScript',
    score: 95,
    description: '广泛用于 Web 开发的脚本语言',
  },
])
</script>

展开行

TableColumn 组件设置 type 为 expand 即可设置展开行
该插槽暴露 row index 两个属性

ID	编程语言	得分	描述
1	Golang	100	Google 开发的静态强类型编译型语言
2	TypeScript	99	JavaScript 的超集，添加了类型系统
3	CSS	100	层叠样式表，用于描述 HTML 文档的呈现
4	JavaScript	95	广泛用于 Web 开发的脚本语言

vue

<template>
  <div class="p-4">
    <Table :data="data" select border zebra>
      <TableColumn type="expand">
        <template #expand="{ row }: TableColumnExpandScope<Language>">
          <div class="p-0">
            <p>
              {{ row.id }} : {{ row.name }} 是 {{ row.description }} 语言,它的得分是
              {{ row.score }}
            </p>
          </div>
        </template>
      </TableColumn>
      <TableColumn prop="id" label="ID" />
      <TableColumn prop="name" label="编程语言" />
      <TableColumn prop="score" label="得分" />
      <TableColumn prop="description" label="描述" :width="300" />
    </Table>
  </div>
</template>

<script setup lang="ts">
import { Table, TableColumn, type TableColumnExpandScope } from 'li-daisy'

import { ref } from 'vue'

interface Language {
  id: number
  name: string
  score: number
  description: string
}

const data = ref<Language[]>([
  {
    id: 1,
    name: 'Golang',
    score: 100,
    description: 'Google 开发的静态强类型编译型语言',
  },
  {
    id: 2,
    name: 'TypeScript',
    score: 99,
    description: 'JavaScript 的超集，添加了类型系统',
  },
  {
    id: 3,
    name: 'CSS',
    score: 100,
    description: '层叠样式表，用于描述 HTML 文档的呈现',
  },
  {
    id: 4,
    name: 'JavaScript',
    score: 95,
    description: '广泛用于 Web 开发的脚本语言',
  },
])
</script>

选择列

select 来设置表格是否可选，selectable 来设置可选列的回调函数
当全选或选择列时会触发 select-change 回调

有序排序

选择之后的顺序为原有列表顺序,而不是选择顺序

ID	编程语言	得分
1	Golang	100
2	TypeScript	99
3	CSS	100
4	JavaScript	95

vue

<template>
  <div class="p-4">
    <Table :data="data" select :selectable="selectable" @select-change="handleSelectChange">
      <TableColumn prop="id" label="ID" />
      <TableColumn prop="name" label="编程语言" />
      <TableColumn prop="score" label="得分" />
    </Table>

    <p class="mt-2 text-sm opacity-60 font-bold">当前选择列</p>
    <ul class="list">
      <li v-for="row in selectRows" :key="row.id" class="list-row">
        <span>{{ row.id }} - {{ row.name }} - {{ row.score }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { Table, TableColumn } from 'li-daisy'

import { ref } from 'vue'

interface Language {
  id: number
  name: string
  score: number
}

const data = ref<Language[]>([
  { id: 1, name: 'Golang', score: 100 },
  { id: 2, name: 'TypeScript', score: 99 },
  { id: 3, name: 'CSS', score: 100 },
  { id: 4, name: 'JavaScript', score: 95 },
])

// 过滤逻辑
const selectable = (lang: Language): boolean => lang.score > 98

const selectRows = ref<Language[]>()

const handleSelectChange = (rows: Language[]) => {
  selectRows.value = rows
}
</script>

溢出提示

当表格内容过长时，可设置 tooltip 来配置溢出提示

ID	编程语言	得分	描述
1	Goland 开发的静态强类型编译型语言开发的静态强类型编译型语言	100	Google 开发的静态强类型编译型语言
2	TypeScript	99	JavaScript 的超集，添加了类型系统
3	CSS	100	层叠样式表，用于描述 HTML 文档的呈现
4	JavaScript	95	广泛用于 Web 开发的脚本语言

vue

<template>
  <div class="p-4">
    <Table :data="data">
      <TableColumn prop="id" label="ID" :width="100" />
      <TableColumn prop="name" :tooltip="true" label="编程语言" :width="100" />
      <TableColumn prop="score" label="得分" />
      <TableColumn prop="description" label="描述" :width="200" tooltip />
    </Table>
  </div>
</template>

<script setup lang="ts">
import { Table, TableColumn } from 'li-daisy'

import { ref } from 'vue'

interface Language {
  id: number
  name: string
  score: number
  description: string
}

const data = ref<Language[]>([
  {
    id: 1,
    name: 'Goland 开发的静态强类型编译型语言开发的静态强类型编译型语言',
    score: 100,
    description: 'Google 开发的静态强类型编译型语言',
  },
  {
    id: 2,
    name: 'TypeScript',
    score: 99,
    description: 'JavaScript 的超集，添加了类型系统',
  },
  {
    id: 3,
    name: 'CSS',
    score: 100,
    description: '层叠样式表，用于描述 HTML 文档的呈现',
  },
  {
    id: 4,
    name: 'JavaScript',
    score: 95,
    description: '广泛用于 Web 开发的脚本语言',
  },
])
</script>

占位高度(高度回溯)

由于表格数据时常更新，导致表格高度频繁变化，可能造成页面布局抖动。通过设置 placeholder-height 属性，给定表格一个起始的占位高度可以一定程度上来规避数据更新导致的较大布局抖动。除此之外后续数据变化表格会智能记录上一次的高度，以保持稳定的占位空间，提供更好的用户体验

	ID	语言名称	评分	描述
no result

刷新页面可发现无数据时表格会占据一定高度

vue

<template>
  <div class="flex flex-col gap-4">
    <div class="mb-4">
      <button class="btn ml-auto" @click="getNewDataset">生成新数据</button>
    </div>
    <Table
      v-loading="loading"
      :data="data"
      :min-height="400"
      select
      hover-highlight
      :placeholder-height="300"
    >
      <TableColumn prop="id" label="ID" :width="60" />
      <TableColumn prop="name" label="语言名称" :width="150" />
      <TableColumn prop="score" label="评分" header-align="right" align="right" :width="80" />
      <TableColumn prop="description" label="描述" :width="300" />
    </Table>
    <p class="font-bold mx-auto">刷新页面可发现无数据时表格会占据一定高度</p>
  </div>
</template>

<script setup lang="ts">
import { Table, TableColumn } from 'li-daisy'
import { ref } from 'vue'

interface Language {
  id: number
  name: string
  score: number
  description: string
}

// 预定义完整的数据集
const fullDataset: Language[] = [
  {
    id: 1,
    name: 'JavaScript',
    score: 95,
    description: '一种高级的、解释性的编程语言，是Web开发的核心技术之一',
  },
  {
    id: 2,
    name: 'TypeScript',
    score: 92,
    description: 'JavaScript的超集，添加了静态类型检查和其他高级特性',
  },
  {
    id: 4,
    name: 'Python',
    score: 98,
    description: '一种高级编程语言，以其简洁的语法和强大的库生态系统而闻名',
  },
  { id: 4, name: 'Java', score: 85, description: '面向对象的编程语言，广泛用于企业级应用开发' },
  { id: 5, name: 'C++', score: 78, description: '高性能的编译型语言，适合系统级编程和游戏开发' },
  { id: 6, name: 'C#', score: 83, description: '微软开发的面向对象编程语言，主要用于.NET平台' },
  { id: 7, name: 'Go', score: 100, description: 'Google开发的编程语言，以其并发性和简洁性著称' },
  { id: 8, name: 'Rust', score: 91, description: '系统编程语言，注重安全性、速度和并发性' },
  {
    id: 9,
    name: 'Swift',
    score: 86,
    description: '苹果公司开发的编程语言，专为iOS和macOS开发设计',
  },
  {
    id: 10,
    name: 'Kotlin',
    score: 89,
    description: '现代化的编程语言，与Java完全互操作，主要用于Android开发',
  },
  { id: 11, name: 'PHP', score: 72, description: '服务器端脚本语言，广泛用于Web开发' },
  {
    id: 12,
    name: 'Ruby',
    score: 79,
    description: '动态的、面向对象的编程语言，以其优雅的语法而闻名',
  },
  { id: 13, name: 'Scala', score: 81, description: '结合面向对象和函数式编程的语言，运行在JVM上' },
  {
    id: 14,
    name: 'Dart',
    score: 84,
    description: 'Google开发的客户端优化语言，主要用于Flutter开发',
  },
  {
    id: 15,
    name: 'Vue.js',
    score: 94,
    description: '渐进式JavaScript框架，用于构建用户界面和单页面应用程序',
  },
  { id: 16, name: 'React', score: 93, description: 'Facebook开发的JavaScript库，用于构建用户界面' },
  {
    id: 17,
    name: 'Angular',
    score: 87,
    description: 'Google开发的TypeScript框架，用于构建大型Web应用',
  },
  {
    id: 18,
    name: 'Node.js',
    score: 90,
    description: '基于Chrome V8引擎的JavaScript运行环境，用于服务端开发',
  },
  { id: 19, name: 'Express.js', score: 88, description: '基于Node.js的Web应用框架，简洁而灵活' },
  { id: 20, name: 'Spring Boot', score: 85, description: 'Java生态系统中的企业级应用开发框架' },
  {
    id: 21,
    name: 'Django',
    score: 86,
    description: 'Python的高级Web框架，鼓励快速开发和干净的设计',
  },
  { id: 22, name: 'Laravel', score: 82, description: 'PHP的现代Web应用框架，具有优雅的语法' },
  { id: 23, name: 'Flutter', score: 89, description: 'Google的UI工具包，用于构建跨平台移动应用' },
  { id: 24, name: 'React Native', score: 87, description: 'Facebook开发的移动应用开发框架' },
  { id: 25, name: 'Next.js', score: 91, description: 'React的生产就绪框架，支持服务端渲染' },
]

const data = ref<Language[]>([])

const loading = ref(false)

const getNewDataset = () => {
  loading.value = true
  data.value = []

  // 随机生成 1-15 条数据
  const count = Math.floor(Math.random() * 15) + 1

  // 从完整数据集中随机抽取
  const shuffled = [...fullDataset].sort(() => 0.5 - Math.random())
  const selectedData = shuffled.slice(0, count)

  // 重新分配ID，保持连续性
  const newData = selectedData.map((item, index) => ({
    ...item,
    id: index + 1,
  }))

  setTimeout(() => {
    loading.value = false
    data.value = newData
  }, 1000)
}
getNewDataset()
</script>

API

Attributes

Table

属性值	说明	类型	默认值
data	表格数据	`Array<Record<string, any>>`	-
size	表格大小	`TableSize`	`'info'`
zebra	是否带有斑马纹	`boolean`	`false`
border	是否显示边框	`boolean`	`false`
select	是否可选	`select`	`false`
selectable	设置可选列的回调函数	`(item: T) => boolean`	`false`
hover-highlight	悬浮某列时高亮该列	`boolean`	`false`
placeholder-height	表格的默认占位高度(px)	`number`	`300`

TableColumn

属性值	说明	类型	默认值
prop	列内容的字段名	`string`	-
label	表格标签	`string`	-
width	单元格宽度(px)	`number`	-
pin-col	固定位置	`['left','right']`	-

Event

名称	说明	类型
select-change	全选或选择某列时触发	`(item:any) => void`

Slots

Table

插槽名	说明
default	默认插槽

TableColumn

插槽名	说明	暴露属性
default	单元格内容插槽	`{ row: T, index: number }`
header	表头内容插槽	`{ label: string, prop: string }`
expand	展开行插槽	`{ row: T, index: number }`

Table表格 ​

基础用法 ​

自定义表头 ​

自定义列 ​

固定表头 ​

固定列 ​

展开行 ​

选择列 ​

溢出提示 ​

占位高度(高度回溯) ​

API ​

Attributes ​

Table ​

TableColumn ​

Event ​

Slots ​

Table ​

TableColumn ​

Table表格

基础用法

自定义表头

自定义列

固定表头

固定列

展开行

选择列

溢出提示

占位高度(高度回溯)

API

Attributes

Table

TableColumn

Event

Slots

Table

TableColumn