elementui table表格动态生成多级表头

kurcp

已于 2022-08-11 13:48:49 修改

阅读量8.3k

点赞数 2

文章标签： elementui 前端 javascript

于 2022-02-22 10:37:29 首次发布

本文链接：https://blog.youkuaiyun.com/m0_59570698/article/details/123062893

版权

本文展示了如何使用Vue.js封装一个可扩展的多级表格组件。组件包含`test1.vue`用于创建表格列，`test2.vue`作为主要的表格组件，而`test3.vue`演示了如何在实际应用中使用这个组件。组件支持悬浮显示详情，通过`v-for`遍历多级表头数据，并动态渲染表格内容。表格数据和表头配置可以通过props传递给组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实现效果

2.封装table表格组件

test1.vue

<template>
  <el-table-column :label="coloumnHeader.label" :prop="coloumnHeader.label">
    <template v-for="item in coloumnHeader.children">
      <tableColumn
        v-if="item.children && item.children.length"
        :key="item.id"
        :coloumn-header="item"
      ></tableColumn>
      <el-table-column
        v-else
        :key="item.name"
        :label="item.label"
        :prop="item.prop"
      >
         //悬浮展示详情
       <template slot-scope="scope">
             <el-popover
                placement="top-start"
                width="200"
                trigger="click"
                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
              >
                  <el-button type="text" slot="reference">                
                      {{scope.row[scope.column.property]}}
                  </el-button>
              </el-popover>
          </template>
      </el-table-column>
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: "tableColumn",
  props: {
    coloumnHeader: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style scoped>
</style>

test2.vue

<template>
  <el-table :data="tableData">
    <template v-for="item in tableHeader">
      <table-column
        v-if="item.children && item.children.length"
        :key="item.id"
        :coloumn-header="item"
      ></table-column>
      <el-table-column
        v-else
        :key="item.id"
        :label="item.label"
        :prop="item.prop"
      >
     </el-table-column>
    </template>
  </el-table>
</template>

<script>
import TableColumn from "./test1.vue";
export default {
  props: {
    // 表格的数据
    tableData: {
      type: Array,
      required: true,
    },
    // 多级表头的数据
    tableHeader: {
      type: Array,
      required: true,
    },
  },
  components: {
    TableColumn,
  },
};
</script>

<style scoped>
.el-button{
  border: none;
  padding: 0;
  color: #606266;
}
</style>

test3.vue 调用组件使用

<template>
  <div>
    <dynamic-table
      :table-data="tableData"
      :table-header="tableConfig"
    ></dynamic-table>
  </div>
</template>

<script>
import DynamicTable from "./test2.vue";
export default {
  components: {
    DynamicTable,
  },
  data() {
    return {
      // 表数据
      tableData: [
        {
          date: "2021-09-06",
          name: "张三",
          phone: "15739951445",
          province: "河北省",
          city: "张家口",
          address: "河北省张家口市桥西区",
        },
      ],
      // 表头数据
      tableConfig: [
        {
          id: 100,
          label: "日期",
          prop: "date",
        },
        {
          id: 200,
          label: "配送信息",
          prop: "",
          children: [
            {
              id: 210,
              label: "姓名",
              prop: "",
              children:[
                  {
                      id:300,
                      label:"姓名1",
                      prop:"name"
                  },
                  {
                      id:301,
                      label:"姓名2",
                      prop:"name"
                  },
                  {
                      id:302,
                      label:"姓名3",
                      prop:"name"
                  },
              ]
            },
            {
              id: 220,
              label: "电话",
              prop: "",
              children:[
                  {
                      id:303,
                      label:"电话1",
                      prop:"phone"
                  },
                  {
                      id:304,
                      label:"电话2",
                      prop:"phone"
                  },
                  {
                      id:305,
                      label:"电话3",
                      prop:"phone"
                  },
              ]
            },
            {
              id: 200,
              label: "地址",
              prop: "",
              children: [
                {
                  id: 210,
                  label: "省份",
                  prop: "province",
                },
                {
                  id: 220,
                  label: "城市",
                  prop: "city",
                },
                {
                  id: 220,
                  label: "详细地址",
                  prop: "address",
                },
              ],
            },
          ],
        },
        {
            id:400,
            label:"测试表头",
            prop:"",
            children:[
                {
                    id:401,
                    label:"测试二级表头1",
                    prop:"",
                    children:[
                        {
                            id:402,
                            label:"测试三级表头1",
                            prop:"name"
                        },
                        {
                            id:403,
                            label:"测试三级表头2",
                            prop:"phone"
                        }
                    ]
                },
                {
                    id:404,
                    label:"测试二级表头2",
                    prop:"",
                    children:[
                        {
                            id:405,
                            label:"测试三级表头",
                            prop:"phone"
                        },
                        {
                            id:406,
                            label:"测试三级表头2",
                            prop:"name"
                        }
                    ]
                }
            ]
        }
      ],
    };
  },
};
</script>

<style scoped>
</style>