element ——tree组件懒加载数据、自定义label、修改高亮样式、回显点击状态

news2024/11/13 11:02:47

在这里插入图片描述
在这里插入图片描述

需求

  • 整体宽高占一屏,超出滚动条
  • tree组件点击懒加载每一级数据,一共三级
  • 三级节点前加icon,标识是否已学习
  • 点击高亮显示背景图
  • 横向超出省略显示或者横向滚动条
  • 纵向超出纵向滚动条
  • 修改其字体和间距
  • ☆☆☆☆☆从别的页面跳入回显三级点击状态

tree组件

 <el-card
  shadow="hover"
  class="solo mr-10"
  style="height: calc(100vh - 85px); width: 330px"
>
  <div slot="header" class="clearfix">
    <span>问题分类</span>
  </div>
  <div class="scroll-tree">
    <el-scrollbar style="height: 100%">
      <!--accordion  -->
      <el-tree
        ref="popularTree"
        highlight-current
        :props="defaultProps"
        lazy
        :default-expanded-keys="treeExpandedKeys"
        :load="loadNode"
        @node-click="handleNodeClick"
        node-key="knowledgeBaseTypeId"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <div class="flex_l">
            <i
              v-if="node.level == 3 && data.whetherLearn == 1"
              class="el-icon-success blue size-10 mr-4"
            ></i>
            <span
              style="max-width: 270px"
              class="line-1"
              :class="
                node.level == 1
                  ? 'bold gray-1'
                  : node.level == 2
                  ? 'gray-1'
                  : ''
              "
              >{{ data.knowledgeBaseTypeId }}{{ data.typeName }}</span
            >
          </div>
        </span>
      </el-tree>
    </el-scrollbar>
  </div>
</el-card>

nodeIdArr: [], // 首页跳转过来携带的三级id   [2,3,4]
isFirst: false, // 是否从首页来
treeExpandedKeys: [], // 默认展开的节点id
defaultProps: {
    children: "children",
    label: "typeName",
    isLeaf: "leaf",
},
modelId: null, // 模型id
info: {}, //详情

 mounted() {
    this.nodeIdArr = this.$route.query.id.split(",").map((item) => item * 1);
    if (this.nodeIdArr.length > 0) {
      this.isFirst = true;
    }
  },

  methods: {
    async loadNode(node, resolve) {
      console.log("loadNode", 1111, node);
      // 根据 node.level 获取相应层级的数据
      const level = node.level;
      const { data } = await this.$axios.get(
        "/qualityTrain/knowledgeBase/type/tree?parentId=" +
          (level == 0 ? 0 : node.data.knowledgeBaseTypeId)
      );
      // 从首页跳入的时候,默认选中知识点高亮
      this.highlight(node, data);

      if (node.level == 2) {
        data.forEach((item) => {
          item.leaf = true;
        });
      }
      resolve(data);
    },
    // 从首页跳入的时候,默认选中知识点高亮
    highlight(node, data) {
      if (this.nodeIdArr.length > 0 && this.isFirst) {
        // 默认展开1级和2级
        this.treeExpandedKeys.push(this.nodeIdArr[0]);
        this.treeExpandedKeys.push(this.nodeIdArr[1]);

        if (node.level == 2) {
          console.log("loadNode", 6666, data);
          let currentNode = data.filter(
            (item) => item.knowledgeBaseTypeId == this.nodeIdArr[2]
          );
          if (currentNode.length > 0) {
            // 设置高亮
            this.$nextTick(function () {
              this.$refs.popularTree.setCurrentKey(currentNode[0].knowledgeBaseTypeId);
            });
            // 模拟自动点击
            this.handleNodeClick(currentNode[0]);
          } else {
            this.$message.error("知识点已下架");
          }
          this.isFirst = false;
        }
      }
    },
    handleNodeClick(data) {
      console.log("Clicked node:", data);
      this.info = {};
      this.$refs.modelRef.changeCom([]);

      if (data.modelId != this.modelId) {
        this.modelId = data.modelId;
        if (this.modelId) {
          this.$refs.modelRef.init(this.modelId);
        }
      }
      if (data.level == 3) {
        // 获取知识点详情
        this.$axios
          .get("/qualityTrain/knowledgeBase/type/" + data.knowledgeBaseTypeId)
          .then((res) => {
            this.info = res.data;
            // 获取构件信息
            this.$refs.modelRef.changeCom(
              res.data.componentJsonStr
                ? JSON.parse(res.data.componentJsonStr)
                : []
            );
          });
        // 更新学习状态
        if (data.whetherLearn == 0) {
          this.$axios
            .post("/qualityTrain/knowledgeBase/updateLearnStatus", {
              knowledgeBaseTypeId: data.knowledgeBaseTypeId,
            })
            .then((res) => {
              data.whetherLearn = 1;
            });
        }
      }
    },
},
/deep/.el-card__header {
  font-weight: 700;
  padding: 0.17rem;
  border-bottom: 0px solid #000;
  font-size: 16px;
}
/deep/ .el-tree-node__content {
  height: 33px;
  /* box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03); */
}
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  /* background: rgba(238, 243, 254, 1);
  border-left: 5px solid rgba(64, 158, 255, 1); */
  background: url("../../assets/img/tree-bg.png") no-repeat center center;
  background-size: 100% 100%;
  color: rgba(64, 158, 255, 1);
  font-weight: 700;
  border-radius: 3px;
  /* padding-left: 31px !important; */
}
/* /deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content
  .el-tree-node__expand-icon {
  color: rgba(64, 158, 255, 1);
} */
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content
  .el-tree-node__expand-icon.is-leaf {
  color: transparent;
  font-size: 0px;
}
/deep/.el-tree-node__expand-icon {
  color: #333;
}
/deep/.el-tree-node__expand-icon.is-leaf {
  color: transparent;
  font-size: 0px;
}
/* 添加水平滚动条和纵向滚动条 */
.scroll-tree {
  overflow: auto;
  height: calc(100vh - 140px);
}
.scroll-tree ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.el-tree {
  display: inline-block;
  min-width: 100%;
}
/deep/.solo .el-card__body {
  padding: 0px;
}
/deep/.solo1 .el-card__body {
  padding-top: 4px;
}

整个组件

<template>
  <div id="index" class="bg w100 vh100">
    <div class="">
      <div class="flex pl-20" style="height: 70px">
        <el-page-header @back="goBack" content="知识库"> </el-page-header>
        <!-- <div class="flex_r">
          已学习<span class="size-26 green bold ml-10">{{
            formattedTime
          }}</span>
        </div> -->
      </div>
      <div class="flex_l flex-top plr-20">
        <el-card
          shadow="hover"
          class="solo mr-10"
          style="height: calc(100vh - 85px); width: 330px"
        >
          <div slot="header" class="clearfix">
            <span>问题分类</span>
          </div>
          <div class="scroll-tree">
            <el-scrollbar style="height: 100%">
              <!--accordion  -->
              <el-tree
                ref="popularTree"
                highlight-current
                :props="defaultProps"
                lazy
                :default-expanded-keys="treeExpandedKeys"
                :load="loadNode"
                @node-click="handleNodeClick"
                node-key="knowledgeBaseTypeId"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <div class="flex_l">
                    <i
                      v-if="node.level == 3 && data.whetherLearn == 1"
                      class="el-icon-success blue size-10 mr-4"
                    ></i>
                    <span
                      style="max-width: 270px"
                      class="line-1"
                      :class="
                        node.level == 1
                          ? 'bold gray-1'
                          : node.level == 2
                          ? 'gray-1'
                          : ''
                      "
                      >{{ data.knowledgeBaseTypeId }}{{ data.typeName }}</span
                    >
                  </div>
                </span>
              </el-tree>
            </el-scrollbar>
          </div>
        </el-card>
        <div
          v-show="modelId"
          class="border"
          style="height: calc(100vh - 85px); width: 48%"
        >
          <ZhipeiModel ref="modelRef"></ZhipeiModel>
        </div>
        <div
          class="scroll ml-10"
          :style="`height: calc(100vh - 85px); width: calc(${
            modelId ? '52%' : '100%'
          } - 350px)`"
        >
          <el-card shadow="never">
            <div class="title">知识点</div>
            <div class="text">
              {{ info.typeName }}
            </div>
          </el-card>
          <el-card shadow="never" class="mtb-10">
            <div class="title">详细描述</div>
            <div v-html="info.detailedDescription"></div>
          </el-card>
          <el-card
            shadow="never"
            class="mtb-10"
            v-if="
              info.knowledgeBasePictureList?.length > 0 ||
              info.knowledgeBaseVideoList?.length > 0
            "
          >
            <div v-if="info.knowledgeBasePictureList?.length > 0">
              <div class="title">图片</div>
              <div>
                <el-image
                  v-for="(item, i) in info.knowledgeBasePictureList"
                  :key="i"
                  style="width: 1.14rem; height: 1.14rem; border-radius: 6px"
                  :src="item.pictureUrl"
                  :preview-src-list="
                    info.knowledgeBasePictureList.map((item) => item.pictureUrl)
                  "
                  class="mr-6"
                >
                </el-image>
              </div>
            </div>
            <div v-if="info.knowledgeBaseVideoList?.length > 0">
              <div class="title">视频</div>
              <div class="flex_l flex-wrap">
                <video
                  v-for="(item, i) in info.knowledgeBaseVideoList"
                  :key="i"
                  :style="`width: ${
                    modelId ? '48%' : '3rem'
                  }; height: 2rem; background: #000`"
                  controls
                  :src="item.videoUrl"
                  class="w100 h100 mr-6"
                ></video>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  layout: "layout1",
  data() {
    return {
      nodeIdArr: [], //首页跳转过来携带的三级id
      isFirst: false,
      treeExpandedKeys: [], // 展开的节点id
      defaultProps: {
        children: "children",
        label: "typeName",
        isLeaf: "leaf",
      },
      modelId: null, // 模型id
      info: {}, //题目详情

      itemList: [], //题目列表
      id: null, //选中题目id
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  mounted() {
    this.nodeIdArr = this.$route.query.id.split(",").map((item) => item * 1);
    if (this.nodeIdArr.length > 0) {
      this.isFirst = true;
    }
  },

  methods: {
    async loadNode(node, resolve) {
      console.log("loadNode", 1111, node);
      // 根据 node.level 获取相应层级的数据
      const level = node.level;
      const { data } = await this.$axios.get(
        "/qualityTrain/knowledgeBase/type/tree?parentId=" +
          (level == 0 ? 0 : node.data.knowledgeBaseTypeId)
      );
      // 从首页跳入的时候,默认选中知识点高亮
      this.highlight(node, data);

      if (node.level == 2) {
        data.forEach((item) => {
          item.leaf = true;
        });
      }
      resolve(data);
    },
    // 从首页跳入的时候,默认选中知识点高亮
    highlight(node, data) {
      if (this.nodeIdArr.length > 0 && this.isFirst) {
        // 默认展开1级和2级
        this.treeExpandedKeys.push(this.nodeIdArr[0]);
        this.treeExpandedKeys.push(this.nodeIdArr[1]);

        if (node.level == 2) {
          console.log("loadNode", 6666, data);
          let currentNode = data.filter(
            (item) => item.knowledgeBaseTypeId == this.nodeIdArr[2]
          );
          if (currentNode.length > 0) {
            // 设置高亮
            this.$nextTick(function () {
              this.$refs.popularTree.setCurrentKey(currentNode[0].knowledgeBaseTypeId);
            });
            // 模拟自动点击
            this.handleNodeClick(currentNode[0]);
          } else {
            this.$message.error("知识点已下架");
          }
          this.isFirst = false;
        }
      }
    },
    handleNodeClick(data) {
      console.log("Clicked node:", data);
      this.info = {};
      this.$refs.modelRef.changeCom([]);

      if (data.modelId != this.modelId) {
        this.modelId = data.modelId;
        if (this.modelId) {
          this.$refs.modelRef.init(this.modelId);
        }
      }
      if (data.level == 3) {
        // 获取知识点详情
        this.$axios
          .get("/qualityTrain/knowledgeBase/type/" + data.knowledgeBaseTypeId)
          .then((res) => {
            this.info = res.data;
            // 获取构件信息
            this.$refs.modelRef.changeCom(
              res.data.componentJsonStr
                ? JSON.parse(res.data.componentJsonStr)
                : []
            );
          });
        // 更新学习状态
        if (data.whetherLearn == 0) {
          this.$axios
            .post("/qualityTrain/knowledgeBase/updateLearnStatus", {
              knowledgeBaseTypeId: data.knowledgeBaseTypeId,
            })
            .then((res) => {
              data.whetherLearn = 1;
            });
        }
      }
    },

    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped lang="css">
/deep/.el-card__header {
  font-weight: 700;
  padding: 0.17rem;
  border-bottom: 0px solid #000;
  font-size: 16px;
}
/deep/ .el-tree-node__content {
  height: 33px;
  /* box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03); */
}
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  /* background: rgba(238, 243, 254, 1);
  border-left: 5px solid rgba(64, 158, 255, 1); */
  background: url("../../assets/img/tree-bg.png") no-repeat center center;
  background-size: 100% 100%;
  color: rgba(64, 158, 255, 1);
  font-weight: 700;
  border-radius: 3px;
  /* padding-left: 31px !important; */
}
/* /deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content
  .el-tree-node__expand-icon {
  color: rgba(64, 158, 255, 1);
} */
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content
  .el-tree-node__expand-icon.is-leaf {
  color: transparent;
  font-size: 0px;
}
/deep/.el-tree-node__expand-icon {
  color: #333;
}
/deep/.el-tree-node__expand-icon.is-leaf {
  color: transparent;
  font-size: 0px;
}
/* 添加水平滚动条和纵向滚动条 */
.scroll-tree {
  overflow: auto;
  height: calc(100vh - 140px);
}
.scroll-tree ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.el-tree {
  display: inline-block;
  min-width: 100%;
}
/deep/.solo .el-card__body {
  padding: 0px;
}
/deep/.solo1 .el-card__body {
  padding-top: 4px;
}
.title {
  font-weight: bold;
  margin: 15px 0;
  /* border-left: 4px solid #00cdba; */
  line-height: 15px;
  padding-left: 6px;
  font-size: 16px;
}
.active {
  background: rgba(0, 205, 186, 0.1);
  color: #00cdba;
  font-weight: 700;
}

.text {
  text-align: justify;
  padding: 0 10px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2044032.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

netsh int tcp show global查看TCP参数

TCP 全局参数 接收方缩放状态 : enabled 接收窗口自动调节级别 : normal 加载项拥塞控制提供程序 : default ECN 功能 : disabled RFC 1323 时间戳 : allowed 初始 RTO : 1000 接收段合并状态 : enabled 非 Sack Rtt 复原 : disabled 最大 SYN 重新传输次数 : 4 快速打开 : en…

CrowdTransfer:在AIoT社区中实现众包知识迁移

这篇论文的标题是《CrowdTransfer: Enabling Crowd Knowledge Transfer in AIoT Community》&#xff0c;由 Yan Liu, Bin Guo, Nuo Li, Yasan Ding, Zhouyangzi Zhang, 和 Zhiwen Yu 等作者共同撰写&#xff0c;发表在《IEEE Communications Surveys & Tutorials》上。以下…

springboot航班进出港管理系统--论文源码调试讲解

第2章 开发环境与技术 本章节对开发航班进出港管理系统管理系统需要搭建的开发环境&#xff0c;还有航班进出港管理系统管理系统开发中使用的编程技术等进行阐述。 2.1 Java语言 Java语言是当今为止依然在编程语言行业具有生命力的常青树之一。Java语言最原始的诞生&#xff…

网络协议--TCP/IP协议栈--三握和四挥

文章目录 网络设备交换机交换机的工作原理 路由器路由器工作原理 TCP/IP协议栈TCP/IP四层模型TCP/IP通信过程TCP特性TCP包头结构源端口、目标端口序列号(seq)确认号(小ack)标记位 TCP协议端口号端口号分类ssh服务nc工具抓包 socket套接字端口占用 三次握手Wireshark抓包tcpdump…

构建完美人工智能工程师培养计划

一、理论基础构建 1. 数学与统计学基础&#xff1a;作为AI的基石&#xff0c;扎实的数学与统计学知识不可或缺。培养计划应涵盖高等数学、线性代数、概率论与数理统计、优化理论等课程&#xff0c;为学员打下坚实的理论基础。 2. 计算机科学基础&#xff1a;包括数据结构、算…

DLT645-2007通信协议---读取解析智能电表数据

一、DLT645-2007通讯协议 DLT645-2007是中国电力行业规定的一种智能电表通信协议&#xff0c;主要用于电能表与数据采集设备之间的通信。DLT645-2007协议定义了电能表与数据采集设备之间的数据格式、通信方式、命令集等内容&#xff0c;用于实现电能表数据的采集、传输和管理。…

SpringBoot整合Liquibase

1、是什么&#xff1f; Liquibase官网 Liquibase是一个开源的数据库管理工具&#xff0c;可以帮助开发人员管理和跟踪数据库变更。它可以与各种关系型数据库和NoSQL数据库一起使用&#xff0c;并提供多种数据库任务自动化功能&#xff0c;例如数据库迁移、版本控制和监控。Li…

盲盒抽奖源码

介绍&#xff1a; 功能上还可以,商品和盲盒可以在你程序里添加&#xff0c;设置概率等!! 新盲盒星球抽奖商城手机网站源码 随机开箱抢购 代码有点大&#xff0c;三百多M。 教程搭建很简单&#xff0c;基本10分钟搭建一套&#xff0c;可一个服务器搭建多套&#xff0c;只要你…

【时时三省】(C语言基础)模拟实现字符串相关函数

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 模拟实现库函数:strcpy 示例: const修饰指针 示例: const 修饰变量&#xff0c;这个变量为常变量&#xff0c;不能被修改&#xff0c;但本质上还是变量 正常num&#xff1d;20是改不了它…

招聘管理型岗位,HR会考察候选人的哪些方面?

团队管理能力 团队管理能力可以说是管理型岗位最基本的要求&#xff0c;只有具备优秀的团队管理能力&#xff0c;才能够带领团队实现组织目标&#xff0c;提高团队凝聚力&#xff0c;而想要考察一个人是否具备团队管理能力&#xff0c;就要通过多方面来测试。可以先了解一下候…

CSS笔记总结:第五天(HTML+CSS笔记完结)

Xmind鸟瞰图&#xff1a; 简单文字总结&#xff1a; css知识总结&#xff1a; 元素的显示与隐藏&#xff1a; 1.通过display隐藏元素 不保留位置 2.通过visibility 隐藏元素 保留位置 3.overflow 溢出隐藏 鼠标样式cursor&#xff1a; 1.defauly小白 2.p…

走进 keepalived:解析高可用架构背后的关键技术

一、什么是keepalived Keepalived 是一个用于实现服务器高可用性&#xff08;High Availability&#xff0c;简称 HA&#xff09;的软件。 简单来说&#xff0c;它的主要作用是检测服务器的状态&#xff0c;并在主服务器出现故障时&#xff0c;自动将服务切换到备份服务器上&…

SVN权限控制解析

一、基础数据说明 1. 代码目录存在多级 2. 角色存在多级 二、规则说明 结合例子讲规则 1、多级文件夹 a. 继承与覆盖 【文件夹层级】&#xff1a; Repositories/BS_Projects/科顺 BS_Projects包含了多个项目&#xff0c;每个项目是一个文件夹&#xff0c;比如“科顺”是其…

分布式事务Seata保证审批状态一致性

文章目录 下载安装Seata创建对应数据库修改application.yml相应配置启动SeataPmHub 实战——添加任务事务管理业务库添加undo_log 表对应服务加上对应的seata依赖Nacos 配置文件 pmhub-project-dev.yml 添加 seata 配置&#xff1a;接口添加 GlobalTransactional 注解涉及数据表…

Centos7升级gitlab(17)

在 CentOS 7 中将 GitLab 从版本 17.1.1 升级到 17.2.2&#xff0c;涉及以下步骤。请务必在升级前备份数据&#xff0c;以防止升级过程中出现问题导致数据丢失。 升级步骤 1. 备份 GitLab 数据 在升级之前&#xff0c;确保已经备份了 GitLab 的数据&#xff0c;包括数据库、…

【windows安装gradle】

1.去官网下载自己需要的版本。 2.直接解压到指定目录 3.配置环境变量 3.1.新建 GRADLE_HOME 环境变量值指向你的 Gradle 的解压路径 3.2.将 %GRADLE_HOME%\bin 添加到 Path 环境变量中 4.打开cmd命令行输入gradle -v查看是否安装成功以及当前版本 下面显示说明已经安装完成了…

软件测试用例的编写(六)

软件测试用例 定义 测试用例&#xff08;TestCase&#xff09;是为项目需求而编制的一组测试输入&#xff0c;执行步骤&#xff0c;以及预期结果&#xff0c;以便测试某个程序是否满足客户需求 可以总结为&#xff1a;每一个测试点的数据设计和步骤设计 – 对测试点的细化 作…

CentOS 7虚拟机安装部署MongoDB

1.添加MongoDB的YUM仓库 打开终端&#xff0c;执行以下命令来添加MongoDB的YUM仓库&#xff1a; sudo vi /etc/yum.repos.d/mongodb-org-4.4.repo 在打开的文件中&#xff0c;输入以下内容&#xff1a; [mongodb-org-4.4] nameMongoDB Repository baseurlhttps://repo.mon…

城V4系列版本开源前后端uniapp代码

本文来自&#xff1a;智慧同城V4系列版本开源前后端uniapp代码 - 源码1688 应用介绍 演示地址&#xff1a;https://tongchengsaas.88881111.icu/ 账号&#xff1a;ceshi 密码&#xff1a;12345678 前端演示&#xff1a; 测试环境 php7.2mysql5.6ningx 安装拓展 ioncube&#x…

AppScan——Web 应用安全扫描的得力工具

一、引言 在当今数字化时代&#xff0c;Web 应用成为企业业务的重要支撑&#xff0c;但同时也面临着各种安全威胁。AppScan 作为一款专业的 Web 应用安全扫描工具&#xff0c;为保障 Web 应用的安全性提供了有力的支持。本文将对 AppScan 进行详细介绍&#xff0c;包括其功能、…