Table 表格

用于展示多列结构化数据、财务报表、进度对比的表格控件，支持横向滚动、按列排序、斑马纹、带边框与单元格插槽。

---

代码示例

1. 基础数据表格 (Basic Table)

设置 columns 列配置数组与 data 数据列表，开启 bordered 边框与 striped 斑马纹。

<template>
  <mu-table :columns="columns" :data="data" bordered striped />
</template>

<script setup>
import { ref } from 'vue'

const columns = ref([
  { title: '姓名', prop: 'name', width: 140 },
  { title: '部门', prop: 'department', width: 180 },
  { title: '职级', prop: 'role', width: 140 },
  { title: '城市', prop: 'city', width: 140 }
])

const data = ref([
  { name: '张三', department: '前端架构部', role: 'P7', city: '杭州' },
  { name: '李四', department: '终端UI组', role: 'P6', city: '上海' },
  { name: '王五', department: '移动端开发', role: 'P8', city: '北京' }
])
</script>

---

2. 按列排序与自定义单元格插槽 (Sort & Slots)

在列配置中指定 sortable: true 开启列头排序功能。使用 #cell-[prop] 来自定义具体列的单元格渲染。

<template>
  <mu-table :columns="columns" :data="data" @row-click="onRowClick">
    <template #cell-status="{ row }">
      <mu-tag :type="row.status === '正常' ? 'success' : 'warning'" size="small">
        {{ row.status }}
      </mu-tag>
    </template>
  </mu-table>
</template>

<script setup>
import { ref } from 'vue'

const columns = ref([
  { title: '项目名称', prop: 'projectName', width: 220 },
  { title: '进度', prop: 'progress', sortable: true, width: 140 },
  { title: '状态', prop: 'status', width: 140 }
])

const data = ref([
  { projectName: 'MuzhiyuUI 组件库 1.0', progress: 100, status: '正常' },
  { projectName: 'VisionOS 拟态交互', progress: 75, status: '处理中' }
])

const onRowClick = ({ row }) => {
  console.log('点击行:', row)
}
</script>

---

Column 列表配置属性 (Column Object)

参数名	说明	类型	可选值	默认值
title	列名文本	String	-	''
prop / key	对应数据项的字段属性键名	String	-	''
width	列宽度 (支持 '160rpx' 或数字)	Number | String	-	'160rpx'
align	单元格对齐方式	String	left | center | right	'left'
headerAlign	表头文字对齐方式 (默认同 align)	String	left | center | right	-
sortable	是否开启该列的升序/降序排序	Boolean	true | false	false
fixed	是否固定该列在左右侧	String | Boolean	left | right | true	false
formatter	自定义格式化函数	Function	(row: Object) => String	-

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
columns	表格列定义配置数组	Array	-	[]
data	表格数据源数组	Array	-	[]
bordered	是否带有外边框与纵向分隔线条	Boolean	true | false	false
striped	是否开斑马纹隔行变色	Boolean	true | false	false
defaultSort	默认排序配置项 (`{ prop, order: 'asc'	'desc' }`)	Object	-
minWidth	表格总体最小最小宽度	Number | String	-	''

---

事件说明 (Events)

事件名	说明	回调参数
sort-change	排序字段或排序方向改变时触发	({ column: Object, index: Number, direction: 'asc' | 'desc' })
row-click	点击整行时触发	({ row: Object, index: Number })