【Element plus】动态表头，问题记录

改名字了我

已于 2024-10-15 15:07:38 修改

阅读量557

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js elementui

于 2024-08-07 09:35:54 首次发布

本文链接：https://blog.csdn.net/qq_41085087/article/details/140975565

记录遇到的一个奇怪问题。
在用el-table的时候，有时候表头是不固定的，还可能存在多级表头的情况，所以写了一个判断，有children的时候就迭代显示el-table-column，结果在没有子级的时候可以正常显示，在有子级的时候子级表头就显示不出来，但是加了下面这个，或者在这个地方随便放点东西（比如放几个字，如：“askdjh”）就能正常显示了，好奇怪。。。

<div>不加这个子表头显示不出来。。。</div>

<template>
  <el-table-column
    v-for="field in fields"
    :key="field"
    :prop="field[fieldProp.prop]"
    :label="field[fieldProp.label]"
    :min-width="field.minWidth ? field.minWidth : 200"
    show-overflow-tooltip
    align="center"
  >
    <template v-if="field.children && Array.isArray(field.children)">
      <div>不加这个子表头显示不出来。。。</div> 
       <!-- askdjh-->
      <custom-table-column :fields="field.children" :fieldProp="fieldProp"></custom-table-column>
    </template>
  </el-table-column>
</template>
<script lang="ts" setup name="CustomTableColumn">
import {
    IField, IFieldProp } from '../../ts/mixin'

const props = defineProps({
   
  fields: {
   
    //字段
    type: Array as PropType<IField[]>,
  },
  fieldProp: {
   
    //字段显示和使用的值
    type: Object as PropType<IFieldProp>,
    default: () => {
   
      return {
   
        prop: 'name',
        label: 'nickname',
      }
    },
  },
})
</script>

// mixin.ts文件
// 字段
export interface IField {
   
  name?:

最低0.47元/天解锁文章