一、父组件
<template>
<div class="page_five">
<el-menu
:default-active="activeIndex"
class="menu_header"
mode="horizontal"
@select="handleSelect"
>
<template v-for="item in tabMenuList" :key="item.id">
<el-menu-item v-if="!item.children" :index="item.id">{{
item.label
}}</el-menu-item>
<el-sub-menu v-else :index="item.id">
<template #title>{{ item.label }}</template>
<el-menu-item
v-for="cItem in item.children"
:key="cItem.id"
:index="cItem.id"
>{{ cItem.label }}</el-menu-item
>
</el-sub-menu>
</template>
</el-menu>
<div class="content_box">
<template v-if="showFlag == '1'">11111</template>
<template v-if="showFlag == '2'">
<ComOne
:menuChose="menuChose"
:title="title1"
:tableColumn="tableColumn1"
:tableData="tableData1"
@getScroll="getScrollFun"
/>
<ComOne
:menuChose="menuChose"
:title="title2"
:tableColumn="tableColumn2"
:tableData="tableData2"
/>
<ComOne
:menuChose="menuChose"
:title="title3"
:tableColumn="tableColumn3"
:tableData="tableData3"
/>
<ComTwo></ComTwo>
</template>
<template v-if="showFlag == '3'">333333</template>
<template v-if="showFlag == '4'">444444</template>
</div>
</div>
</template>
<script lang="ts">
import {
defineComponent,
nextTick,
onMounted,
reactive,
ref,
toRefs,
} from "vue";
import $ from "jquery";
import pageFourTs from "../dataJson/pageFourData";
import ComOne from "@/components/comOne.vue";
import ComTwo from "@/components/comTwo.vue";
export default defineComponent({
name: "pageFour",
components: {
ComOne,
ComTwo,
},
setup() {
const activeIndex = ref("1");
const { pageFourState } = pageFourTs();
const state = reactive({
tabMenuList: [] as any,
title1: "结构化关系维护",
tableColumn1: [
{
prop: "name",
label: "姓名",
},
{
prop: "age",
label: "年龄",
},
{
prop: "sex",
label: "性别",
},
],
tableData1: [
{
id: 1,
name: "马小跳",
age: "12",
sex: "男",
},
{
id: 2,
name: "光头强",
age: "18",
sex: "女",
},
{
id: 3,
name: "灰太狼",
age: "32",
sex: "男",
},
{
id: 4,
name: "蓝精灵",
age: "27",
sex: "女",
},
],
title2: "结构化信息展示",
tableColumn2: [
{
prop: "name",
label: "电影名",
},
{
prop: "time",
label: "时间",
},
{
prop: "price",
label: "票价",
},
],
tableData2: [
{
id: 1,
name: "人生大事",
time: "2022",
price: "50",
},
{
id: 2,
name: "姐姐",
time: "2021",
price: "45",
},
{
id: 3,
name: "长津湖",
time: "2021",
price: "60",
},
{
id: 4,
name: "哪吒",
time: "2020",
price: "40",
},
],
title3: "业绩薪酬",
tableColumn3: [
{
prop: "name",
label: "电影名",
},
{
prop: "time",
label: "时间",
},
{
prop: "price",
label: "票价",
},
],
tableData3: [
{
id: 1,
name: "人生大事",
time: "2022",
price: "50",
},
{
id: 2,
name: "姐姐",
time: "2021",
price: "45",
},
{
id: 3,
name: "长津湖",
time: "2021",
price: "60",
},
{
id: 4,
name: "哪吒",
time: "2020",
price: "40",
},
],
showFlag: "1",
menuChose: "1",
});
function handleSelect(data: string) {
state.showFlag = data;
state.menuChose = data;
const showReg = RegExp(/\d-\d/g);
if (data.match(showReg)) {
state.showFlag = data.slice(0, 1);
}
}
function getScrollFun(data: number) {
$(".content_box").animate({ scrollTop: data - 140 + "px" }, 500);
}
onMounted(() => {
nextTick(() => {
state.tabMenuList = pageFourState.tabMenuList;
});
});
return {
...toRefs(pageFourState),
...toRefs(state),
activeIndex,
handleSelect,
getScrollFun,
};
},
});
</script>
<style lang="scss">
.page_five {
width: 100%;
height: 100%;
}
.content_box {
height: 695px;
overflow: auto;
}
</style>
二、子组件comOne.vue
<template>
<div class="com_one">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>{{ title }}</span>
</div>
</template>
<el-table :data="tableData" border size="small" style="width: 100%">
<el-table-column
v-for="(item, index) in tableColumn"
:key="index"
:prop="item.prop"
:label="item.label"
></el-table-column>
</el-table>
</el-card>
</div>
</template>
<script lang="ts">
import {
computed,
defineComponent,
nextTick,
reactive,
Ref,
toRefs,
watch,
} from "vue";
import $ from "jquery";
export default defineComponent({
name: "comOne",
props: {
tableColumn: {
type: Object,
require: true,
},
tableData: {
type: Array,
require: true,
},
title: {
type: String,
defalult: "标题",
},
menuChose: {
type: String,
defalult: "1",
},
},
emits: ["getScroll"],
setup(props, { emit }) {
const scroll: Ref = computed(() => {
return props.menuChose;
});
watch(
scroll,
() => {
nextTick(() => {
let scrollNumber =
$(".com_one .box-card")[scroll.value.slice(2, 3) - 1].offsetTop;
emit("getScroll", scrollNumber);
});
},
{
immediate: true,
}
);
const state = reactive({});
return {
...toRefs(props),
...toRefs(state),
};
},
});
</script>
<style lang="scss">
.com_one {
margin-bottom: 20px;
.box-card {
.card-header {
text-align: start;
span {
border-left: 4px solid #66a9e9;
border-radius: 1px;
font-weight: bold;
margin-left: 0px;
padding-left: 6px;
}
}
}
}
</style>
三、JSON数据 pageFourData.ts
import { reactive } from "vue";
export default function () {
const state = reactive({
tabMenuList: [
{
id: '1',
label: "基本信息",
},
{
id: '2',
label: "结构化信息",
children: [
{
id: "2-1",
label: "结构化关系维护",
},
{
id: "2-2",
label: "结构化信息展示",
},
{
id: "2-3",
label: "业绩薪酬",
},
],
},
{
id: '3',
label: "费率信息",
},
{
id: '4',
label: "运作信息",
children: [
{
id: "4-1",
label: "用户管理",
},
{
id: "4-2",
label: "配置管理",
},
{
id: "4-3",
label: "角色管理",
},
{
id: "4-4",
label: "定时任务补偿",
},
],
},
],
});
return {
pageFourState: state
}
}