ant-design-vue3的table使用总结

根据windows文件管理器，我们肉眼可见需要四个字段：name文件名、type文件类型、update修改日期、size大小[{title: '名称',},{width: 220,title: '修改日期', dataIndex: 'date',key: 'date',ellipsis: true, resizable: true,},{title: '类型',},

学习使我快乐——玉祥

8055人浏览 · 2022-09-12 15:49:06

学习使我快乐——玉祥 · 2022-09-12 15:49:06 发布

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>

<template v-slot:bodyCell="{column,record}">  表示你在设置表格数据部分

<template v-if="column.dataIndex==='name'">   表示你在设置字段为name的数据展示内容

<div :id="'FileList_'+record.name">
            <img class="file_list_icon" :src="getIconUrl(record)">
            <span style="font-size: 15px;">{{ record.name }}</span>
</div>

效果：

其他字段同理

表格样式修改

利用我们在组件上添加的class名，可以方便的设置指定的样式。当然你需要会看控制台。

也需要会一些css选择器的用法

a-table组件的表头灰色还有边框线，很明显这里不需要这些样式

通过如下操作，表头变白色，去掉边框

（之所以能实现修改样式，就是利用了优先级的原理而已）

.file_list_table .ant-table-thead > tr > th {
  background-color: white;
  border: none;
}

比如：你可以修改成喜庆色。。。。。。。。。。。

言归正传

（1）发现每一行数据底部都有一条横线，尝试改掉

.file_list_table .ant-table-tbody > tr > td {
  border: none;
}

（2）发现单元格的内边距太大，接着改掉

.file_list_table .ant-table.ant-table-small .ant-table-title,
.file_list_table .ant-table.ant-table-small .ant-table-footer,
.file_list_table .ant-table.ant-table-small .ant-table-thead > tr > th,
.file_list_table .ant-table.ant-table-small .ant-table-tbody > tr > td,
.file_list_table .ant-table.ant-table-small tfoot > tr > th,
.file_list_table .ant-table.ant-table-small tfoot > tr > td {
  padding: 3px 8px;
}

（3）发现鼠标放到数据行时，背景高亮颜色不好看，我改改改

.file_list_table .ant-table-tbody > tr.ant-table-row:hover > td,
.file_list_table .ant-table-tbody > tr > td.ant-table-cell-row-hover {
  background: none;
}

.file_list_table .ant-table.ant-table-small .ant-table-tbody .ant-table-row:hover{
  background-color: #d1edf6;
}

（4）。。。。应该都学会了吧

排序功能

看官方文档，可以只一列排序，也可以设置多列同时排序

这里就先以"文件名name"举例，添加排序功能

为字段属性添加sorter属性，传递一个比较函数，通过反复点击windows文件管理器的排序，推测出排序原理，转换成如下排序方式：

（1）首先正向排序时，将文件与文件夹分开两份，文件夹在优先在上面，文件在下面

（2）然后再按照名称排序，通过js自带的字符串比较函数进行排序

en 按照英文首字母排序，大写在前，小写在后

zh 按照中文拼音排序

这里用en

同理再按照文件类型，模仿一个排序就可以了。不过多赘述。

再看windows文件管理器，多列排序时，只生效一种

看似已经满足使用，做起来就发现没有那么容易。总觉得少一个功能函数，应该有一个清除排序效果的功能，这样点击排序的时候，通过change就可以先清除排序效果，然后再排序，就实现只有一列生效了。找了一圈，没有找到。

多次搜索尝试，注意到sortOrder属性，它才是真正控制排序的源头。

sortOrder 排序的受控属性，外界可用此控制列的排序，可设置为 'ascend' 'descend' false boolean|string

给字段添加这个属性，设置为‘ascend’，你会发现列表默认直接排好序，就是正序排序，而且此时再点击排序按钮，发现没有任何反应，就是一直保持着正向排序。但change的回调是一直存在的。结合这两个内容可以通过设置变量的方式，通过change动态修改变量，达到修改排序效果。

添加一个sorted的数据变量，内容其实就是change返回来的格式，这里设置了默认值，用来实现默认排序。

通过表达式来设置sortOrder的值，这样就设置一个变量sorted即可控制所有需要排序的字段。

不能说有20个字段，就设置20个变量来控制排序。。。。。

再看change回调，获取排序信息

设置有排序功能字段的sortOrder字段值

搞定。

拖拽调整列宽

在字段属性中加上resizable字段。true

然后添加回调事件，在回调函数中，写上固定语法即可。

设置选中行效果：

添加两个变量，一个是选中行前styleName，另一个是选中行时selectedName，

选中行样式：

.file_list_selected_row_style{
  background-color: #b2dfef;
  border: 1px solid #4697db;
  transition: all 0.2s ease-out;
}

点击行时，通过设置单击事件

这里还是通过操作document元素来实现的，很容易，虽然不建议。。。

随便找个单元格，通过将数据主键作为元素id，如下图

因为不能直接设置tr元素，因此我们需要通过子元素往上找，就能找到tr元素了，

然后操作tr元素添加样式或者移除样式即可。如下图

编写两个方法，一个是移除行样式，一个是设置行样式

还有多选没实现，反正都一个原理，有空在整

整体效果：

附列表代码：

<template>
  <div class="full" style="overflow: auto;user-select: none;position:relative;" >
<!--    通过div监听点击表格以外的空白取消选中行-->
    <div class="full"   style="position: absolute;height: 100%;" @click="click_blank"></div>
    <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 v-if="column.dataIndex==='type'">
          <span style="font-size: 16px;color: #868686;">{{record.type === 'dir' ? '文件夹' : getEndName(record.name) + '文件' }}</span>
        </template>
        <template v-if="column.dataIndex==='date'">
          <span style="font-size: 16px;color: #868686;">{{ record.update}}</span>
        </template>
        <template v-if="column.dataIndex==='size'">
          <button class="empty_button full"  v-if="record.type !== 'dir'" style="text-align: right;font-size: 16px;color: #868686;">{{ getFileSizeString(record.size) }}</button>
        </template>
      </template>

    </a-table>


  </div>
</template>
<script>
export default {
  name: "FileList",
  data(){
    return{
      sorted:{ order: 'ascend', field: 'name', columnKey: 'name'},
      columns:[],
      resourceFileList:[],
      data:[],
      path:[],
      selectedName:'',//当前选中行
      styleName:'',//样式显示所在行
    }
  },
  created() {
    this.getResourceList();
  },
  mounted() {
    this.columns=[
      {
        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',},
    ];
    this.initListener();
  },
  methods:{
    /**
     * 初始化监听器
     */
    initListener() {
      //传送数据
      this.$event.$on('FileList_set_data',data1=>{
        this.data=data1;
      });
      this.$event.$on('FileList_set_path',path1=>{
        this.path=path1;
      });
    },
    setSort(){
      for(let i=0;i<this.columns.length;i++){
        if(this.columns[i].sorter){
          this.columns[i].sortOrder=this.sorted.columnKey === this.columns[i].key && this.sorted.order;
        }
      }
    },
    /**
     * 拖拽监听
     */
    handleResizeColumn(w, col){
      col.width = w;
    },
    /**
     * 计算文件大小
     */
    getFileSizeString(value){
      if(value<1024){
        return this.getFormatNum(value)+' B';
      }else{
        value=parseInt(value/1024);
        return this.getFormatNum(value)+' KB';
      }
    },
    /**
     * 三位一逗
     */
    getFormatNum(number){
      const reg = /(\d)(?=(?:\d{3})+$)/g;
      return  number.toString().replace(reg,'$1,');
    },
    /**
     * 设置行的单击双击等监听事件
     */
    setRow(record,index){
      return {
        onClick:()=>{
          this.removeSelectedRowStyle();
          this.setSelectedRowStyle(record);
        },
        onDblclick:()=>{
          this.removeSelectedRowStyle();
          this.doubleRow(record,index);
        },
      };
    },
    /**
     * 双击行，触发事件
     * @param record
     */
    doubleRow(record){
      if(record.type==='dir'){
        this.path.push(record.name);
        if(this.path[0]==='此电脑'){
          this.path.shift();
        }
        this.$event.$emit('FileManager_set_data',JSON.parse(JSON.stringify(this.path)));
      }

    },
    setSelectedRowStyle(record){
      this.selectedName=record.name;
      //添加当前选中行的样式
      let tr=document.getElementById("FileList_"+this.selectedName).parentElement.parentElement;
      if(tr)tr.className+=' file_list_selected_row_style';
      this.styleName=this.selectedName;
      this.$event.$emit('FileManager_set_footer',{size:this.data.length,selectSize:1});
    },
    removeSelectedRowStyle(){
      if(this.styleName&&this.styleName!==''){
        try{
          let tr=document.getElementById("FileList_"+this.styleName).parentElement.parentElement;
          if(tr)tr.className=tr.className.replace(' file_list_selected_row_style','');
        }catch (e){
          this.nullHave(e);
        }
      }
      this.styleName='';
      this.$event.$emit('FileManager_set_footer',{size:this.data.length,selectSize:0});
    },
    click_blank(){
      this.removeSelectedRowStyle();
    },
    nullHave(){
    },
    /**
     * 读取资源文件列表
     */
    getResourceList(){
      const files = require.context('@/assets/file', false, /.png$/);
      files.keys().forEach(e => {
        this.resourceFileList.push(e.replace("./", ""));
      });
    },
    /**
     * 列表切换事件
     */
    change_table(pagination, filters, sorter){
      this.sorted= sorter;
      this.setSort();
    },
    /**
     * 根据类型和icon值 来获取图标文件地址
     */
    getIconUrl(item){
      let url= require("@/assets/file/" + ((!item.icon || item.icon === '' || this.resourceFileList.indexOf(item.icon+'.png') < 0) ? ((item.type === 'dir') ? 'dir' : 'unknow') : item.icon) + '.png');
      return url;
    },
    /**
     * 解析出后缀名
     */
    getEndName(name){
      if (name && name.indexOf(".") >= 0) {
        try {
          return name.substring(name.lastIndexOf(".") + 1, name.length).toUpperCase();
        } catch (e) {
          this.nullHave(e);
        }
      }
      return "";
    },

    /**
     * 文件名 排序要用的 文件夹优先原则
     * @param a
     * @param b
     * @returns {number}
     */
    compareName(a, b){
      let abs;
      if (a.type !== 'dir' && b.type === 'dir') abs= 1;
      else if (a.type === 'dir' && b.type !== 'dir') abs= -1;
      else abs=  a.name.localeCompare(b.name, 'en');
      return abs;
    },
    /**
     * 文件类型，排序要用的 文件夹优先原则
     * @param a
     * @param b
     * @returns {number}
     */
    compareType(a, b){
      if ((a===b)) return 0;
      if (a !== 'dir' && b === 'dir') return 1;
      if (a === 'dir' && b !== 'dir') return -1;
      return a.localeCompare(b, 'en');
    },
  },
}
</script>

<style>
.file_list_table {

}

.file_list_table .ant-table-small .ant-table-thead > tr > th {
  background-color: transparent;
  border: none;
}

.file_list_table .ant-table-tbody > tr > td {
  border: none;
}

.file_list_table .ant-table-tbody > tr.ant-table-row:hover > td,
.file_list_table .ant-table-tbody > tr > td.ant-table-cell-row-hover {
  background: none;
}

.file_list_table .ant-table.ant-table-small .ant-table-title,
.file_list_table .ant-table.ant-table-small .ant-table-footer,
.file_list_table .ant-table.ant-table-small .ant-table-thead > tr > th,
.file_list_table .ant-table.ant-table-small .ant-table-tbody > tr > td,
.file_list_table .ant-table.ant-table-small tfoot > tr > th,
.file_list_table .ant-table.ant-table-small tfoot > tr > td {
  padding: 3px 8px;
}
.file_list_table .ant-table-column-sort{
  background: none;
}
.file_list_table .ant-table.ant-table-small .ant-table-tbody .ant-table-row:hover{
  background-color: #d1edf6;
}



.file_list_icon {
  width: 20px;
  height: 20px;
}
.file_list_selected_row_style{
  background-color: #b2dfef;
  border: 1px solid #4697db;
  transition: all 0.2s ease-out;
}
</style>