VUE element UI实现动态生成多级表头递归循环生成

最新推荐文章于 2024-05-19 20:18:26 发布

发根强劲

最新推荐文章于 2024-05-19 20:18:26 发布

阅读量410

点赞数 1

文章标签： vue.js ui javascript 前端 elementui 前端框架

原文链接：https://www.cnblogs.com/llcdxh/p/9473458.html

版权

在这里插入图片描述

index.vue

<template>
  <div>
    <multi-level-table :table-data="tableData" :table-header="columnList"></multi-level-table>
    <multi-level-table :table-data="tableData" :table-header="columnList2"></multi-level-table>
  </div>
</template>
      
<script>
import MultiLevelTable from "./MultiLevelTable";

export default {
  name: "",
  components: { MultiLevelTable },
  props: {},
  data() {
    return {
      tableData: [],
      columnList: [],
      columnList2: [],
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getData();
  },
  beforeDestroy() {},
  methods: {
    getData() {
      this.columnList = [
        {
          prop: "date",
          label: "日期",
        },
        {
          prop: "name",
          label: "姓名",
        },
        {
          prop: "province",
          label: "省份",
        },
        {
          prop: "city",
          label: "市区",
        },
        {
          prop: "address",
          label: "地址",
        },
        {
          prop: "zip",
          label: "邮编",
        },
      ];
      this.columnList2 = [
        {
          id: '1',
          prop: "date",
          label: "日期",
        },
        {
          id: '2',
          prop: "qu1",
          label: "配送信息",
          children: [
            {
              id: '21',
              prop: "name",
              label: "姓名",
            },
            {
              id: '22',
              prop: "qu1-dyzz",
              label: "地址",
              children: [
                {
                  id: '221',
                  prop: "province",
                  label: "省份",
                },
                {
                  id: '222',
                  prop: "city",
                  label: "市区",
                },
                {
                  id: '223',
                  prop: "address",
                  label: "地址",
                },
                {
                  id: '223',
                  prop: "zip",
                  label: "邮编",
                },
              ],
            },
          ],
        },
      ];
      this.tableData = [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ];
    },
  },
};
</script>
      
<style scoped lang="less">
</style>

MultiLevelTable.vue

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

      <el-table-column v-else :key="item.id" :label="item.label" :prop="item.prop" align="center"></el-table-column>
    </template>
  </el-table>
</template>

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

<style scoped lang='less'>
</style>

TableColumn.vue

<template>
  <el-table-column :label="columnHeader.label" :prop="columnHeader.label" align="center">
    <template v-for="item in columnHeader.children">
      <tableColumn v-if="item.children && item.children.length" :key="item.id" :column-header="item"></tableColumn>

      <el-table-column v-else :key="item.name" :label="item.label" :prop="item.prop" align="center"></el-table-column>
    </template>
  </el-table-column>
</template>

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

<style scoped lang='less'>
</style>