console
new Vue({
el: '#app',
data() {
return {
isCollapse: true,
dataList: [
{ "attachmentName": "asdsaasasdd", "collaborateFileVersion": 3, "updateTime": "2024-11-18 12:48:13", "fileType": "docx", "collaborateFileId": "910863954241733312", "attachmentId": "388132029894653664", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 3, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 4, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 12, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 12222, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 122, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 123, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1332, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1246, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 15564, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 14654654, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 145654654, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1465645, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1465454, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1465465465, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1887, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
{ "attachmentName": "专测片段审核的协议 - 副本.docx", "collaborateFileVersion": 1788, "updateTime": "2024-11-18 13:18:59", "fileType": "docx", "collaborateFileId": "910881777106109760", "attachmentId": "388133967341188832", "attachmentType": "1", "editAble": true, "isContractTemplateFile": "N", "lockStatus": "未锁定", "isFinalized": false },
]
};
},
methods: {
},
computed: {
collapseText() {
return this.isCollapse ? 'el-icon-arrow-left headline-wrapper-show custom-tooltip' : 'el-icon-arrow-right headline-wrapper-show custom-tooltip';
},
},
})
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js">
</script>
<div id="app">
<div class="cmp-office-list-box">
<el-scrollbar :style="isCollapse ? 'border: 1px solid #dddddd3b;height: 740px' : 'height: 740px'">
<!-- 文件列表 -->
<div :class="isCollapse ?
'cmp-office-list' :
'cmp-office-list-is-collapse'">
<div class="list">
<div class="list-des-wrap">
<div v-for="(item, index) in dataList" :key="item" @click="activateChange(index)">
{{item.attachmentId}}
</div>
</div>
</div>
</div>
</el-scrollbar>
<div :class="collapseText" @click="isCollapse = !isCollapse" :data-title="isCollapse?'收起':'展开'"></div>
</div>
</div>
/* 基础样式 */
.cmp-office-list-box {
height: 750px;
display: flex;
}
.cmp-office-list {
width: 240px;
height: 100%;
background: color(display-p3 1 1 1);
border-radius: 4px;
transition: width 0.3s ease;
}
.cmp-office-list-is-collapse {
width: 0px;
overflow: hidden;
transition: width 0.3s ease;
}
.list {
height: 100%;
}
.headline-wrapper-show {
cursor: pointer;
font-size: 12px;
font-weight: 500;
opacity: 1;
height: 40px;
line-height: 40px;
background: #e5e5e5;
color: #ffffff;
border: 1px solid transparent;
-webkit-transition: all .3s cubic-bezier(.25, .1, .25, 1);
transition: all .3s cubic-bezier(.25, .1, .25, 1);
border-right: 1px solid #82828224;
margin-top: 377px;
transform: translateX(-10px);
}
.headline-wrapper-show:hover {
border: 1px solid #3a8ee6;
}
.el-icon-arrow-left {
left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.el-icon-arrow-right {
left: 286px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.title {
font-size: 16px;
font-weight: bold;
color: #333;
padding: 5px 0;
letter-spacing: -1px;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
margin-right: 8px;
flex-shrink: 0;
}
.list-des-wrap {
width: 100%;
height: 100%;
border: 1px solid #b2b1b129;
transition: width 0.3s ease;
}
.list-des {
height: 68px;
display: flex;
align-items: center;
border-bottom: 1px solid #b2b1b129;
padding: 5px 10px;
cursor: pointer;
box-sizing: content-box;
}
.list-des.active {
display: flex;
border-radius: 4px;
background: linear-gradient(90deg,
color(display-p3 0.2235 0.5059 0.9412) 0%,
color(display-p3 0.298 0.6627 0.9725) 100%);
}
.list-des.active * {
color: #fff;
}
/* 文档名称 start */
.doc-name-item-box {
display: flex;
}
.cmp-office-icon-right-text {
width: 100%;
}
.custom-tooltip:hover::after {
/* css接收dom传参 */
content: attr(data-title);
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
white-space: nowrap;
position: absolute;
transform: translateX(5px);
}
.cmp-office-list::-webkit-scrollbar {
width: 8px;
}
.cmp-office-list::-webkit-scrollbar-track {
background: #f1f1f1;
}
.cmp-office-list::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.cmp-office-list::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Firefox滚动条样式 */
.cmp-office-list {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}
.list-des-wrap {
width: 100%;
height: 100%;
border: 1px solid #b2b1b129;
transition: width 0.3s ease;
overflow: auto; /* 确保内容不会溢出 */
}
.list-des {
height: 68px;
display: flex;
align-items: center;
border-bottom: 1px solid #b2b1b129;
padding: 5px 10px;
cursor: pointer;
box-sizing: border-box; /* 使用border-box以确保内边距和边框包含在宽度内 */
}