ツリーインターフェイス
<el-tree
class="video-tree"
ref="tree"
v-loading="loading"
:props="treeDataParams"
:data="data"
:filter-node-method="filterNode"
node-key="id"
:default-checked-keys="checkedList"
show-checkbox
@check-change="handleCheckChange"
:load="loadNode"
lazy
>
</el-tree>
機能を実現する
//获取后端数据
getBrowseData(content = "") {
this.loading = true;
const {
data } = await automlFlowApi.dataImport.hdfsBrowse({
url: this.url,
content
});
if (data.code)
return this.$notify({
title: "错误",
message: data.msg,
type: "error"
});
this.data = this.processData(data.object);//过滤不相关的文件
this.loading = false;
this.selectList = [];
this.selectDelId = [];
},
// 处理文件数据格式
processData(data) {
data.forEach((item) => {
// 判断文件的后缀
let filePath = item.filePath;
let targetSuffix = filePath.substr(filePath.lastIndexOf(".") + 1);
if (!this.suffix.includes(targetSuffix)) {
item.disabled = true; //不相关的文件设置为不可选中
}
if (item.children) return this.processData(item.children);
return item;
});
return data;
},
//异步懒加载获取子节点
async loadNode(node, resolve) {
if (node.level === 0) {
resolve(node.data);
}
if (node.data.children) {
const {
data } = await automlFlowApi.dataImport.hdfsBrowse({
url: node.data.filePath,
content: ""
});
resolve(this.processData(data.object));
} else resolve([]);
}
適応高さ
@media screen and (max-height: 770px) {
.video-tree {
width: 420px;
height: 530px;
}
}
@media screen and (min-height: 900px) {
.video-tree {
width: 530px;
height: 750px;
}
}
@media screen and (min-height: 780px) and (max-height: 830px) {
.video-tree {
width: 450px;
height: 610px;
}
}
//实现滚动功能
.video-tree {
overflow-y: auto;
}