(vue)树文件夹点击,最后一层标记
<el-popover
v-model="showPopover"
placement="bottom"
title="选择数据资产"
width="500"
trigger="click"
content="这是一段内容 "
>
<Input
slot="reference"
class="filter"
placeholder="请输入选择的数据资产"
v-model="assets"
/>
<!-- 新左侧树 -->
<div class="main2">
<div class="hdfsTitle">
<span
v-for="(item, index) in titleList"
:key="index"
@click="clickTitle(index, item)"
id="titleList"
>
{{ item.name }}<span> / </span>
</span>
<ul class="hdfs">
<li
v-for="(item, index) in hdfsList"
:key="index"
class="dirList"
:id="item.color ? 'hdfsActive' : ''"
@click="hdfsLists(index, item)"
>
<i v-if="item.type == 'dir'" class="el-icon-folder-opened"></i
><i v-else class="el-icon-tickets"></i>
{{ item.name }}
</li>
</ul>
</div>
</div>
<div class="bottom">
<Button @click="assetsCancel">取消</Button>
<Button type="primary" @click="assetsOK">确定</Button>
</div>
</el-popover>
data() {
return {
//资产
showPopover: false, //显示隐藏
assets: "", //input框绑定
hdfsList: [], //文件列表
titleList: [
{
name: "根目录",
path: "/",
},
],
titleIndex: null,
}
}
methods: {
//文件树
filebrowser() {
filebrowser().then((res) => {
this.hdfsList = res.data.data.data;
});
},
//点击节点
hdfsLists(index, item) {
if (item.type == "dir") { //判断类型
let index = this.titleList.indexOf(item);
if (index == -1) {
this.titleList.push(item); //push进面包屑
getDirFile(item.path).then((res) => { //获取当前文件的子集
this.hdfsList = res.data.data.data;
// 给文件添加color=false
this.hdfsList.forEach((cc) => { //不给颜色
if (cc.type == "file") {
cc.color = false;
}
});
this.titleIndex = this.titleList.length;
});
}
} else { //说明是最后一集文本
item.color = !item.color; //颜色标记
this.$forceUpdate(); //强制更新视图
this.assets = item.path; //赋值
}
},
//点击 hdfs 标题面包屑
clickTitle(index, item) {
let num = this.titleList.length - 1;
if (num != index) {
this.titleList.splice(index + 1);
}
getDirFile(item.path).then((res) => {
this.hdfsList = res.data.data.data;
});
},
//资产取消
assetsCancel() {
this.showPopover = false;
},
//资产确定
assetsOK() {
getKnowledgeRecognitionContentByHdfs({
url: this.assets,
userName: this.loginName,
}).then((res) => {
if (res.data.code == 200) {
this.content = res.data.content;
this.showPopover = false;
}
});
},
相关样式:
//资产
.main2 {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 10px;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
.hdfsTitle {
overflow-x: auto;
#titleList {
width: 100%;
overflow-x: auto;
}
}
.hdfs {
width: 100%;
margin-top: 10px;
min-height: 200px;
max-height: 500px;
overflow-y: auto;
overflow-x: auto;
.dirList {
cursor: pointer;
margin-bottom: 8px;
padding: 3px;
.el-icon-folder-opened {
margin-right: 10px;
}
.el-icon-caret-bottom {
padding: 6px;
color: #ccc;
}
.el-icon-caret-right {
color: #ccc;
padding: 6px;
}
}
.dirList:hover {
background: #dcdee264;
}
#hdfsActive {
color: #fc3925;
background-color: #fff;
}
}
}