(vue)树文件夹点击，最后一层标记

(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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

  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;
        }
      });
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

相关样式：

//资产
.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;
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50