<!
--
* @Author: luoxianbo combatzone@163.com
* @Date: 2025
-07
-12 20:23:28
* @LastEditors: luoxianbo combatzone@163.com
* @LastEditTime: 2025
-08
-03 16:32:25
* @FilePath: \VUE3
-PROJECT\vite
-project\src\components\tecHigLin\TecHigligInfo.vue
* @Description: 这是默认
设置,请
设置`customMade`, 打开koroFileHeader查看配置 进行
设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<
div class="parent
-div">
<
div class="left
-cloums
-div" v
-show="leftShowFlag">
<
div class="main
-div">
<
div>
<h2>详细介绍</h2>
</
div>
<
div class="main
-info
-div">
<p>
<span class="span
-title">id </span>
<span class="span
-message">{{ tecDetil.id }}</span>
</p>
<p>
<span class="span
-title">名称 </span>
<span class="span
-message">{{ tecDetil.name }}</span>
</p>
<p>
<span class="span
-title">模块id </span>
<span class="span
-message">{{ tecDetil.type }}</span>
</p>
<p>
<span class="span
-title">模块名称 </span>
<span class="span
-message">{{ tecDetil.typeName }}</span>
</p>
<span class="span
-title">内容</span>
<
div class="message
-div" v
-html="tecDetil.techigligmessage"></
div>
<
div>
<button class="gobackBt" @click="goBack">返回</button>
</
div>
</
div>
</
div>
<
div class="small
-list
-div">
<
div class="small
-list
-div-div">子项目清单</
div>
<
div class="list
-div" id="listContainer"></
div>
</
div>
</
div>
<
div class="right
-cloums
-div" v
-show="!leftShowFlag">
<
div class="small
-list
-div">
<
div class="small
-list
-div-div">子项目清单</
div>
<
div class="list
-div" id="listContainer"></
div>
</
div>
<
div class="small
-detil
-div">详情页面</
div>
</
div>
</
div>
</template>
<script setup>
import technologyTypeApi from "../../api/technologyTypeIndex.js";
import "@vueup/vue
-quill/dist/vue
-quill.snow.
css";
import { ref, onMounted } from "vue";
//缓存内容引入
import { useRoute, useRouter } from "vue
-router";
//详情接口返回数据承接声明
const tecDetil = ref({
id: "",
name: "",
type: "",
typeName: "",
techigligmessage: "",
smalltecVOList: [], // 初始化为空数组
});
// 路由信息对象
const route = useRoute();
const router = useRouter();
const leftShowFlag = ref(true);
//组件渲染函数
onMounted(() => {
//调用详情接口函数
getTecDetil(route.params.id);
});
//获取详情接口调用函数
const getTecDetil = (id) => {
//情趣详情接口
technologyTypeApi.detail({ id: id }).then((res) => {
tecDetil.value = res.data.data;
const smallTecList = res.data.data.smalltecVOList || [];
console.log(typeof smallTecList);
// 1. 获取列表容器
const listContainer = document.getElementById("listContainer");
// 2. 清空现有内容
listContainer.inner
HTML = "";
let ulElement = document.createElement("ul");
ulElement.className = "el
-class
-name";
smallTecList.forEach((item) => {
//创建ol标签
let elElement = document.createElement("ol");
elElement.innerText = item.title;
elElement.addEventListener("click", () => {
getSmallDetil(item.id);
});
//将创建的ol标签加到ul标签中
ulElement.appendChild(elElement);
});
// 4. 将ul添加到容器
listContainer.appendChild(ulElement);
});
};
function getSmallDetil(id) {
console.log("调用子项目详情查询接口", id);
leftShowFlag.value = false;
}
//返回函数
const goBack = () => {
router.push({
name: "TecHigligListName",
});
};
</script>
<style scoped lang="s
css">
.left
-cloums
-div {
display: flex; //弹性布局
justify
-content: center; //水平居中
gap: 10px; //子元素间距
margin: 10px;
height: 560px;
}
.right
-cloums
-div {
display: flex; //弹性布局
justify
-content: left; //水平居中
gap: 10px; //子元素间距
margin: 10px;
height: 560px;
}
//子级元素布局
.main
-div {
flex: 1;
height: 100%;
}
.small
-list
-div {
flex: 0.3;
height: 100%;
weight: 100px;
}
p {
margin: 10px;
}
.span
-title {
background
-color: #bed2f0;
font
-size: 16px; //字号
font
-family: Arial, sans
-serif; //字体
font
-weight: bold; //
加粗
border: 1px solid #000; //边框
border
-radius: 4px; //圆
角
padding: 2px 5px;
margin: 5px;
}
.span
-message {
background
-color: #dde5f1;
font
-size: 16px; //字号
font
-family: Arial, sans
-serif; //字体
border: 1px solid #bdb6b6; //边框
border
-radius: 4px; //圆
角
padding: 2px 5px;
}
.message
-div {
background
-color: rgb(163, 171, 167);
margin: 5px;
padding: 3px;
height: 300px;
width: 100%;
overflow
-y: auto; //当
div的内容过多，则垂直滚动显示
}
.small
-list
-div-div {
background
-color: #bdb6b6;
width: 100%;
border: 1px solid #bdb6b6; //边框
border
-radius: 4px; //圆
角
}
.list
-div {
margin: 4px;
width: 100%;
height: 400px;
}
.li
-class {
background
-color: rgb(118, 115, 115);
}
.gobackBt {
width: 50px;
height: 30px;
background
-color: brown;
}
</style>
分析这段代码，在点击left
-cloums
-div元素下的ol标签之后，right
-cloums
-div元素下的list
-div列表没有数据，式什么原因，如何解决
最低0.47元/天 解锁文章
扫一扫
2365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
