Vue+ElementUI 实现 Windows 文件夹目录效果 - 代码示例
<p>{"template": "<div class="file-explorer"><el-tree :data="treeData" :props="treeProps" @node-click="handleNodeClick" default-expand-all></el-tree><el-input v-model="newFolderName" placeholder="输入新文件夹名称" style="margin-top: 10px;"></el-input><el-button type="primary" @click="createFolder">创建文件夹</el-button><el-upload :action="uploadUrl" :on-success="handleFileUploadSuccess" :show-file-list="false" style="margin-top: 10px;"><el-button type="primary">上传文件</el-button></el-upload></div>", "script": "export default { data() { return { treeData: [], // 文件树数据 treeProps: { label: 'name', // 显示的字段名 children: 'children', // 子节点字段名 }, currentFolder: null, // 当前所在的文件夹 newFolderName: '', // 新文件夹名称 uploadUrl: '/api/upload', // 文件上传接口地址 }; }, mounted() { // 初始化根目录数据 this.fetchFolderData('/'); }, methods: { // 获取指定目录的子目录和文件 fetchFolderData(folderPath) { // 模拟异步请求数据 setTimeout(() => { const data = [ { name: '子目录1', children: [ { name: '子目录1.1', children: [], }, { name: '子目录1.2', children: [], }, ], }, { name: '子目录2', children: [], }, { name: '文件1', }, { name: '文件2', }, ]; this.treeData = data; this.currentFolder = folderPath; }, 500); }, // 处理节点点击事件 handleNodeClick(data) { if (data.children.length > 0) { // 点击的是有子目录的节点，进入子目录 const nextFolderPath = this.currentFolder + '/' + data.name; this.fetchFolderData(nextFolderPath); } }, // 创建新文件夹 createFolder() { // 模拟异步请求创建文件夹 setTimeout(() => { const newFolder = { name: this.newFolderName, children: [], }; this.treeData.push(newFolder); this.newFolderName = ''; }, 500); }, // 处理文件上传成功事件 handleFileUploadSuccess(response, file, fileList) { // 处理上传成功逻辑 console.log('文件上传成功'); }, } };", "style": "<style scoped> .file-explorer { max-width: 400px; margin: 0 auto; padding: 20px; } </style>"}该代码使用 <code>el-tree</code> 组件展示文件目录树，<code>el-input</code> 和 <code>el-button</code> 组件用于创建新文件夹，<code>el-upload</code> 组件用于上传文件。你可以根据实际需求修改接口地址和数据处理逻辑。</p>
原文地址: https://www.cveoy.top/t/topic/pT5v 著作权归作者所有。请勿转载和采集!