树结构表格渲染组件封装

最新推荐文章于 2024-06-29 10:00:00 发布

qq_41643208

最新推荐文章于 2024-06-29 10:00:00 发布

阅读量380

点赞数

文章标签： vue 前端 elementui javascript

本文链接：https://blog.csdn.net/qq_41643208/article/details/125293215

版权

这篇博客详细介绍了如何使用Vue.js构建一个动态Tab组件，该组件能够根据左侧树形结构的点击事件，自动生成和切换右侧Tab栏的内容。组件支持父节点展开与子节点点击事件，子节点信息存储在一个数组中，用于右侧Tab的渲染。同时，利用Vue内置的组件，根据不同的组件名称动态加载对应的组件内容。

摘要由CSDN通过智能技术生成

原型图：

左侧为树形结构，点击左侧子节点相关信息，会在右侧区域新增一条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>