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 发生排序，筛选，分页页码切换会触发该事件

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

/components/table-cn/components/table-cn

定义字段

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

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

[{width: 500,title: '名称',dataIndex: 'name',key: 'name',sorter:(a, b) => pareName(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) => pareType(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":"/09/10 23:56","id":"a2","type":"file"}

2、文件夹

{"name":"456","icon":"dir","update":"/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属性，它才是真正控制排序的源头。

给字段添加这个属性，设置为‘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) => pareName(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) => pareType(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>