ant-design-vue3的table使用总结

vue2x的语法

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

效果：如下图

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

基础结构：

<div class="full" style="overflow: auto;user-select: none;position:relative;" >
    <a-table class="file_list_table"
             :columns="columns"
             :data-source="data"
             :pagination="false"
             size="small"
             :showSorterTooltip="false"
             :customRow="setRow"
             @resizeColumn="handleResizeColumn"
             @change="change_table"
             style="padding:0 10px; "
    >
 
   a-table>
 
div>

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

columns放表头信息

data-source放表数据信息

pagination 是否展示分页组件

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

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

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

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

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

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

https://www.antdv.com/components/table-cnhttps://www.antdv.com/components/table-cn

定义字段

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

name文件名、type文件类型、update修改日期、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组件大小变化时保持宽度不变。windows文件管理器就是这么个效果。

定义数据

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

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

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"
}

自定义展示字段数据

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

如下图：

 
 <a-table class="file_list_table"
             :columns="columns"
             :data-source="data"
             :pagination="false"
             size="small"
             :showSorterTooltip="false"
             :customRow="setRow"
             @resizeColumn="handleResizeColumn"
             @change="change_table"
             style="padding:0 10px; "
    >
 
      <template v-slot:bodyCell="{column,record}">
        <template v-if="column.dataIndex==='name'">
          <div :id="'FileList_'+record.name">
            <img class="file_list_icon" :src="getIconUrl(record)">
            <span style="font-size: 15px;">{{ record.name }}span>
          div>
        template>
      template>
 
a-table>