原型图:
左侧为树形结构,点击左侧子节点相关信息,会在右侧区域新增一条tab栏,每个tab栏所展示的是对应组件:
侧边栏是通过icon配合ul>li属性进行页面渲染,侧边栏默认展示全部内容,支持展开和缩放,通过v-if进行条件渲染,如下图所示:
- 点击父节点会默认展开当前父节点下的所有子节点,父节点下的所有子节点通过v-for进行渲染,每个子节点绑定一个点击事件;
- 点击对应子节点会往将当前节点信息unshift到一个数组中去,因为右侧tab栏区域是根据这个存储子节点信息的数组v-for渲染的;
- 右侧区域因为会引入多个组件,所以右侧tab栏区域单独封装成一个组件,通过父传子将存储子节点信息的数组传过去;
- 子组件接收到数据,通过v-for渲染
5. 因为会展示多个组件,通过Vue内置组件<component>,它有一个is属性,对应的是引入组件的定义名称,我们将引入的所有组件名称存入到一个数组中去,根据下标去切换对应组件信息
<template>
<div>
<el-tabs
v-model="editableTabsValue"
type="card"
closable
@tab-remove="removeTab"
>
<el-tab-pane
v-for="(item, index) in arr"
:key="index"
:label="`${item.title}-${item.date}`"
:name="index"
>
<template class="content">
<component
:is="jobList[item.tableId]"
:parentId="item.did"
></component>
</template>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import gwySalaryStandard from "./gwySalaryStandard.vue";
import judgeSalaryStandard from "./judgeSalaryStandard.vue";
import techniciansStandard from "./techniciansStandard.vue";
import ordinaryStandard from "./ordinaryStandard.vue";
import policePostStandard from "./policePostStandard.vue";
import gwySalaryChange from "./gwySalaryChange.vue";
import gwyWorkerChange from "./gwyWorkerChange.vue";
import gwyPuWorkerChange from "./gwyPuWorkerChange.vue";
import gwyJudgeChange from "./gwyJudgeChange.vue";
import gwyProbationperiodStandard from "./gwyProbationperiodStandard.vue";
import workersProbationStandard from "./workersProbationStandard.vue";
export default {
components: {
gwySalaryStandard,
judgeSalaryStandard,
gwySalaryChange,
techniciansStandard,
ordinaryStandard,
policePostStandard,
gwyWorkerChange,
gwyPuWorkerChange,
gwyJudgeChange,
gwyProbationperiodStandard,
workersProbationStandard,
},
props: {
arr: { type: Array, required: true }
},
data() {
return {
jobList: [
"gwyProbationperiodStandard",
"gwyPuWorkerChange",
"ordinaryStandard",
"policePostStandard",
"gwyWorkerChange",
"techniciansStandard",
"gwySalaryStandard",
"judgeSalaryStandard",
"workersProbationStandard",
"gwyJudgeChange",
"gwySalaryChange",
],
editableTabsValue: 0,
};
},
crteate() {
console.log(this.arr,'tab栏新增');
},
methods: {
removeTab(targetName) {
console.log(this.arr,'tab')
this.arr.splice(targetName, 1);
},
}
};
</script>
<style lang="less" scoped>
.content {
width: 100%;
}
</style>