多级表头

方式一: 利用插槽

<ProTable ref="proTable" :columns="columns" :requestApi="requestApi" :pagination="true" :moreConfig="moreConfig">
  <template #student="{ row }">
    <el-table-column prop="username" label="State" width="120" />
    <el-table-column prop="age" label="City" width="120" />
    <el-table-column prop="idCard" label="idCard" width="120" />
  </template>
</ProTable>

const columns = [
  { prop: 'student', label: '学员', width: 180 },
]

方式二: 使用配置

import ProTable from "@/components/ProTable/indexCopy.vue";
//  indexCopy.vue 既支持普通列表，也支持多级表头，普通列表用法与/ProTable/index.vue 一致

//  模板
<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :requestApi="getData">
      <template #tableHeader>
        <el-button @click="() => {}" type="primary">新增</el-button>
      </template>

      <template #operation="{ row }">
        <el-button @click="() => {}" type="success" plain>编辑</el-button>
      </template>

    </ProTable>
  </div>
</template>

jsx

// 如果要用自定义渲染 记得 lang="jsx"/ lang="tsx"
//多级表头仅需要使用嵌套的 columns 即可，用 _children 属性接收
<script setup lang="jsx">
import ProTable from '@/components/ProTable/indexCopy.vue'
import { ElMessage } from 'element-plus'

const getData = (param) => {
  console.log('param', param)
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        data: {
          records: [
            {
              name: '张三',
              phone: '2024-02-21 09:40:48',
              province: '上海市',
              city: '上海市',
              area: '普陀区',
              address: '金沙江路 1518 弄',
              data: '2022-10-19',
              typeType: 1
            },
            {
              name: '张三',
              phone: '2023-11-30 11:13:04',
              province: '上海市',
              city: '上海市',
              area: '普陀区',
              address: '金沙江路 1518 弄',
              data: '2022-10-28',
              typeType: 2
            }
          ],
          total: 2
        }
      })
    }, 1000)
  })
}
const typeList = [
  {
    label: '类型1',
    value: 1,
    tagType: 'success'
  },
  {
    label: '类型2',
    value: 2,
    tagType: 'warning'
  }
]
// 自定义渲染表头

const headerRender = (scope) => {
  return (
    <el-button type="primary" onClick={() => ElMessage.success('我是通过 tsx 语法渲染的表头')}>
      {scope.column.label}
    </el-button>
  )
}
const columns = [
  { type: 'index', label: '序号', width: 80, fixed: 'left' },
  { type: 'selection', width: 80, fixed: 'left' },
  { prop: 'operation', label: '操作', width: 180, fixed: 'right' },

  { prop: 'data', label: '时间', search: true },
  {
    label: '个人信息',
    headerRender,
    _children: [
      { prop: 'name', label: '姓名' },
      { prop: 'phone', label: '电话' },
      { prop: 'typeType', label: '类型', enum: typeList, tag: true },
      {
        label: '地址',
        _children: [
          { prop: 'province', label: '省', search: true },
          { prop: 'city', label: '市' },
          { prop: 'area', label: '区' },
          { prop: 'address', label: '详细地址' }
        ]
      }
    ]
  }
]
</script>

多级表头 ​

方式一: 利用插槽 ​

方式二: 使用配置 ​

多级表头

方式一: 利用插槽

方式二: 使用配置