Appearance
FreeTable 高级表格
基于 Table 组件的增强版本，支持列排序、列拖拽、单元格编辑、列设置等高级功能。
基础用法
与 c-table 类似，只需将组件替换为 c-free-table 即可使用。
斑马纹
默认开启斑马纹，可通过 stripe 属性控制。
列排序
在列定义中设置 sortable: true 即可开启前端排序。点击表头排序图标进行排序。
列拖拽
设置 draggable 属性开启列拖拽功能。拖动表头即可调整列顺序。
单元格编辑
在列定义中设置 editable: true 即可开启单元格编辑。双击单元格进入编辑模式，失焦或回车保存。
列设置
设置 showSettings 属性（默认开启）会在表格右上角显示列设置按钮，点击可勾选/取消显示列。
自定义列设置触发器
可以通过 settings-trigger 插槽自定义列设置按钮的样式。
树形数据与行拖拽
支持树形数据展示（自动识别 children 字段）和行拖拽排序。
API 参考
Props
除支持 Table 组件的所有 Props 外，额外支持：
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| draggable | 是否开启列拖拽排序 | boolean | false |
| showSettings | 是否显示列设置按钮（控制列显隐） | boolean | true |
| rowDrag | 是否开启行拖拽排序 | boolean | false |
| enableTree | 是否开启树形数据展示 | boolean | false |
| defaultExpandAll | 是否默认展开所有树节点 | boolean | false |
| treeProps | 树形数据配置 | { children: string, hasChildren: string } | { children: 'children', hasChildren: 'hasChildren' } |
| columns | 列定义，见下文 FreeTableColumn | FreeTableColumn[] | [] |
| stripe | 是否显示斑马纹（FreeTable 默认开启） | boolean | true |
Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| settings-trigger | 自定义列设置按钮触发区域 | - |
| [column.key] | 自定义单元格内容 | { row, index } |
| [column.key]-edit | 自定义单元格编辑模式内容 | { row, index, stopEditing } |
FreeTableColumn
继承自 TableColumn，新增以下属性：
| 属性名 | 说明 | 类型 |
|---|---|---|
| editable | 是否可编辑 | boolean |
| sortable | 是否开启排序 | boolean | 'custom' |
| visible | 是否默认显示 | boolean |
| prop | 字段名 (兼容 element-plus 习惯，同 key) | string |
Events
除支持 Table 组件的所有 Events 外，额外支持：
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| sort-change | 排序改变时触发 | { key: string, order: 'asc' | 'desc' | null } |
| column-drag-end | 列拖拽结束时触发 | newColumns: FreeTableColumn[] |
| update:columns | 列配置更新时触发 | columns: FreeTableColumn[] |
| update:data | 数据更新时触发（如编辑后） | data: any[] |
| row-drag-end | 行拖拽结束时触发 | (newIndex: number, oldIndex: number, row: any, newTreeData: any[]) |
| expand-change | 树节点展开/收起时触发 | (row: any, expanded: boolean) |