点击选项卡滑动到指定位置

一、父组件

<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) {
      // const headerHeight = $(".menu_header").outerHeight();
      // data是子组件传过来的offsetTop
      $(".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(() => {
          // 获取当前选项对应dom的offsetTop
          //  let scrollNumber = $(".com_one .box-card")[scroll.value].offsetTop;
          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
  }
}