<template>
<div>
<el-card>
<template #header>
<div>
<span>文件管理</span>
</div>
</template>
<div style="min-height: 450px">
<div class="flex-basis-180px flex-shrink-0">
<avue-tree
ref="tree"
:option="treeoption"
:data="treeData"
v-model="form"
@node-click="nodeClick"
>
</avue-tree>
</div>
<div style="max-width: calc(100% - 220px)">
<LowTable ref="fileTableRef"
tableId="1917144882454827009"
:enhanceData="{ type:'treeview' }"
:fixed-search="{ document_directory: treeVal }"
>
</LowTable>
</div>
</div>
</el-card>
</div>
</template>
<script setup>
import { listToTree } from '@/utils/tree'
import { LowTable } from '@/components/LowDesign/index'
import { ElMessage } from 'element-plus'
import * as TableApi from '@/api/design/table'
const form = ref({})
const treeVal = ref('')
const treeData = ref([])
const treeoption = ref({menu: false})
const fileTableRef = ref()
const nodeClick = (data) => {
treeVal.value = data.value
if(fileTableRef.value?.resetChange){
fileTableRef.value.resetChange()
}
}
// 组件挂载完成后加载数据
onMounted(() => {
loadTreeData()
})
// 获取数据并赋值
const loadTreeData = async () => {
try {
const res = await TableApi.getTableList('1917159226710265858', {}, false)
const treeDatas = listToTree(res.records) // 将结果赋值给 treeData
treeData.value = convertToValueLabelTree(treeDatas);
} catch (error) {
ElMessage.error('加载树形数据失败')
console.error(error)
}
}
// 转换函数:将后端数据转为 { value, label, children } 结构
const convertToValueLabelTree = (data) => {
if (!Array.isArray(data)) return []
return data.map(item => ({
value: item.directory_name,
label: item.directory_name,
children: item.children ? convertToValueLabelTree(item.children) : []
}))
}
</script>
<style scoped>
::v-deep(.el-card) {
&.card-box {
border-radius: 10px;
}
.el-card__header {
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
font-size: 15px;
font-weight: 700;
color: #666;
background-color: #f9f9f9;
// .el-card__body { }
}
}
::v-deep(.el-tree) {
.el-tree-node.is-current > .el-tree-node__content {
background-color: white;
}
.el-tree-node__content {
height: 40px;
.el-tree-node__expand-icon {
font-size: 16px;
}
.el-tree-node__label {
font-family: '微软雅黑', sans-serif;
}
}
}
</style>
这个是全部代码
点击树后有 通过ref调用表格刷新方法?,或者完整的代码复制出来我看看