vue递归组件实现动态多级表头-elementui

最新推荐文章于 2024-08-07 19:25:26 发布

萌新之路

最新推荐文章于 2024-08-07 19:25:26 发布

阅读量1k

点赞数

分类专栏： vue element 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_44162778/article/details/126126987

版权

vue 同时被 2 个专栏收录

49 篇文章 1 订阅

订阅专栏

element

11 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述

父级组件：

<template>
  <div class="home">
    <el-table
        :data="tableData"
        style="width: 100%">
      <template v-for="item in dataList">
        <HelloWorld v-if="item.hasOwnProperty('sub')" :subList="item" />
        <el-table-column
            v-else
            :prop="item.prop"
            :label="item.name"
            width="150">
        </el-table-column>
      </template>

    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  data(){
    return{
      //表头数据
      dataList:[
        {
          name:"序号",
          prop:"id",
        },
        {
          name:"地区",
          prop:"address",
        },
        {
          name:"各栏目投稿采用量",
          prop:"aaa",
          sub:[
            {
              name:"理论调研",
              prop:"bbb",
              sub:[
                {
                  name:"目标值",
                  prop:"number",

                },
                {
                  name:"投稿量",
                  prop:"ccc",

                },
                {
                  name:"采用量",
                  prop:"ddd",

                },
              ]
            },
            {
              name:"市场调研",
              prop:"eee",
              sub:[
                {
                  name:"目标值",
                  prop:"diaoyanNumber",

                },
                {
                  name:"投稿量",
                  prop:"fff",

                },
                {
                  name:"采用量",
                  prop:"ggg",

                },
              ]
            },
            {
              name:"销售状况",
              prop:"jjj",
              sub:[
                {
                  name:"目标值",
                  prop:"kkk",

                },
                {
                  name:"投稿量",
                  prop:"lll",

                },
                {
                  name:"采用量",
                  prop:"mmm",

                },
              ]
            },
          ]
        }],
      //表格数据
      tableData:[
        {
          id:1,
          address:"成都",
          number:123,
          diaoyanNumber:235,
        },
        {
          id:2,
          address:"长江",
          number:2332,
          diaoyanNumber:235,
        },
      ],
    }
  },
}
</script>

子组件：

<template>
  <div class="hello">
    <el-table-column :label="subList.name" :prop="subList.prop" align="center">
      <template v-for="item in subList.sub">
        <HelloWorld v-if="item.hasOwnProperty('sub')" :subList="item" />
        <el-table-column v-else :key="item.prop" :label="item.name" :prop="item.prop" align="center"></el-table-column>
      </template>
    </el-table-column>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    subList: Array,
    default:()=>{
      return []
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>