vue3+element-plus创建动态表格(支持多级表头)

最新推荐文章于 2024-08-25 15:15:24 发布

Fengzq.every()

最新推荐文章于 2024-08-25 15:15:24 发布

阅读量438

点赞数 5

分类专栏： elementplus vue3 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/FZQ115111/article/details/138927217

版权

elementplus 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

创建动态表格组件 myTable.vue

创建动态表格组件 myTableItem.vue

使用组件

<template>
    <MyTable :tableHeader="tableHeader" :tableData="tableData" />
  
</template>

<script setup>
import { ref } from "vue"
import MyTable from "@/components/table/index.vue"
const tableHeader =[
  {
    label: "基本信息",
    children: [
      {
        label: "姓名",
        children: [
          {
            label: "姓名1",
            prop: "name",
            align: "center",
          },
          {
            label: "姓名2",
            prop: "namet",
            align: "center",
          },
        ],
      },
      {
        label: "生日",
        sort: true,
        prop: "birth",
        align: "center",
      },
    ],
  },
  { label: "地址", sort: false, prop: "address", align: "left" },
  {
    label: "年龄",
    sort: true,
    prop: "age",
  },
  {
    label: "电话",
    sort: false,
    prop: "phone",
  },
]

const tableData = [
  {
    name: "张三",
    namet: "张三2",
    address: "广西南宁市贤宾路1号",
    birth: "2021-01-01",
    age: 20,
    phone: "13877100000",
  },
  {
    name: "李四",
    namet: "李四2",
    birth: "2022-01-01",
    address: "广西南宁市悦宾路1号",
    age: 19,
    phone: "13077700000",
  },
  
]



</script>

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