ant-design-vue3的table使用总结

vue2x的语法

背景：使用table组件模仿文件列表

效果：如下图

文件列表不需要分页，因此这里没有做分页功能。

基础结构：

class是为了用来修改当前a-table组件样式用的，并且不影响其他地方正常使用a-table的样式。

放表头信息

data-放表数据信息

是否展示分页组件

size设置表大小，可以看做缩放大小，这里参考系统的文件管理器，设置最小

鼠标放在表头时，是否弹出提醒排序信息（很丑）

设置行属性，主要是用来设置行点击事件，双击事件。（这里针对单双击事件冲突问题a-table没有处理，难题交给了我们开发者，同时设置单双击事件时，双击会触发一次双击事件和触发两次单击事件）

拖拽表头宽度的鼠标事件，会告知鼠标移动了多少距离，拖动的哪一个表头字段

发生排序，筛选，分页页码切换会触发该事件

.....太多了，不懂的看文档吧

定义字段

根据文件管理器，我们肉眼可见需要四个字段：

name文件名、type文件类型、修改日期、size大小

[{width: 500,title: '名称',dataIndex: 'name',key: 'name',sorter:(a, b) => this.compareName(a, b),sortOrder:this.sorted.columnKey === 'name' && this.sorted.order,ellipsis: true,resizable: true,},{width: 220,title: '修改日期', dataIndex: 'date',key: 'date',ellipsis: true, resizable: true,},{width: 170,title: '类型',dataIndex: 'type',key: 'type',sorter:  (a, b) => this.compareType(a.type, b.type),sortOrder: this.sorted.columnKey === 'type' && this.sorted.order,ellipsis: true,resizable: true,},{ width: 140,title: '大小', dataIndex: 'size',key: 'size',ellipsis: true,resizable: true, },{ title: '', dataIndex: 'empty',key: 'empty',},
]

这里最后一个字段，是做到最后才添加的，因为需要有一列自适应的单元格，才能确保其他列在table组件大小变化时保持宽度不变。文件管理器就是这么个效果。

定义数据

文件展示大小，文件夹不需要

文件或者文件夹都需要展示图标，设置图标名称

1、文件

{"size":26851,"name":"456.txt","icon":"txt","update":"2022/09/10 23:56","id":"a2","type":"file"
}

2、文件夹

{"name":"456","icon":"dir","update":"2022/09/10 23:56","type":"dir"
}

自定义展示字段数据

不想要普通的字符串，通过如下方式

如下图：