element 多级表头封装_el-table多级表头怎么封装组件-程序员宅基地

父组件

<template>
<el-table v-if="fields.length > 0" :size="tableSize" :data="dataList show-summary stripe border fit :height="dataList.length > 4 ? '580' : ''">
   <children-table-column v-for="(item, index) in fields" :key="index" :data="item" />
   <el-empty slot="empty" :image-size="100" />
</el-table>
</template>

export default {
  data() {
    return {        
         fields = [
          {
            label: '一级',
            prop: 'form_index',
            form_index: '1'
          },
          {
            label: '一级',
            form_index: '2',
            children: [
              {
                label: '二级',
                form_index: '2-1',
                isDate: 'startDay',
                children: [
                  {
                    label: '三级',
                    prop: 'test',
                    form_index: '2-1-1'
                  },
                  {
                    label: '三级',
                    prop: 'test',
                    form_index: '2-1-2'
                  }
            ]
          },      
        ]
    }
  }
}

封装的组件

<template>
  <el-table-column v-if="data.children && data.children.length > 0" :key="data.form_index" v-bind="data" :render-header="renderHeader" :width="data.width || 'auto'" header-align="center">
    <template>
      <children-table-column v-for="item in data.children" :key="item.form_index" :data="item" />
    </template>
  </el-table-column>
  <el-table-column v-else :key="data.form_index" v-bind="data" :render-header="renderHeader" :width="data.width || 'auto'" header-align="center" />
</template>

<script>
export default {
  name: 'ChildrenTableColumn', // 表头合并
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    // 设置表头换行
    renderHeader(h, { column, $index }) {
      return h('div', {}, [h('div', {}, column.label.split(',')[0]), h('div', {}, column.label.split(',')[1])])
    }
  }
}
</script>
<style scoped lang="scss"></style>

本文链接：https://blog.csdn.net/o_o1996/article/details/128087898

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

小样本学习记录————文本中特征空间的数据增强MEDA： Meta-Learning with Data Augmentation for Few-Shot Text Classification_data augmentation for meta-learning-程序员宅基地

文章浏览阅读2.6k次，点赞2次，收藏6次。MEDA: Meta-Learning with Data Augmentation for Few-Shot Text Classification出发点数据增强球合成器合成模块Synthesis module转换模块Transformation module损失函数球生成器部分损失函数元学习损失训练策略实验数据集结语出发点对于小样本学习文本分类问题中，限制其性能的主要原因之一是因为对于每一个类别有多种的表示方式。所以本文提出了一种数据增强方式来解决样本不足的问题。数据增强原文的数据增强：随机替_data augmentation for meta-learning

SSH简介及两种远程登录的方法_ssh @-程序员宅基地

文章浏览阅读10w+次，点赞588次，收藏3.7k次。目录SSH的安全机制SSH的安装启动服务器的SSH服务SSH两种级别的远程登录SSH的高级应用Secure Shell(SSH) 是由 IETF(The Internet Engineering Task Force) 制定的建立在应用层基础上的安全网络协议。它是专为远程登录会话(甚至可以用Windows远程登录Linux服务器进行文件互传)和其他网络服务提供安全性的协议，..._ssh @

Java中的byte详解_java byte-程序员宅基地

文章浏览阅读4.6w次，点赞32次，收藏118次。Java中的byte详解介绍byte，即字节，由8位的二进制组成。在Java中，byte类型的数据是8位带符号的二进制数。在计算机中，8位带符号二进制数的取值范围是[-128, 127]，所以在Java中，byte类型的取值范围也是[-128, 127]。byte取值范围分析一直在想为什么不是 -128 到 128呢？今天分析了一下这个问题。首先我们得明白一件事情，那就是运算规则(因为计算机中的数是以反码形式存储的，反码再求反码得到该数真值)：正数的最高位都是 0 ，正数的值就是二进制表示的_java byte

ant design 照片墙样式手动上传多图支持multiple_react ant-design upload图片上传 multiple-程序员宅基地

文章浏览阅读2.8k次，点赞5次，收藏10次。默认样式（啥都没有……）：一条：最大条数我设置的3：先简单说下我做的过程，希望有大佬指点，也想能够帮助到刚入门的各位同学。需求和实现：点击上传图片显示图片缩略图并不立即上传，将beforeUpdata中获取到的file存入fileList数组(multiple多选时，beforeUpdata依次传入每一张图的file)，同时在beforeUpdata中要控制随后可上传的数组..._react ant-design upload图片上传 multiple

图解 Go GC-程序员宅基地

文章浏览阅读335次。转载自曹大公众号，不光是图，还有动画，读完对 Go GC 会有一个高层次的理解。这一篇是之前给极客时间 tony bai 老师专栏的供稿，经过编辑的同意，延迟几个月后可以在我的个人号上发出~本文内容只作了解，不建议作为面试题考察。武林秘籍救不了段错误包教包会包分配在各种流传甚广的 C 语言葵花宝典里，一般都有这么一条神秘的规则，不能返回局部变量：int*func(vo..._go gc

Node携手MongoDB探险旅行️-程序员宅基地

文章浏览阅读936次，点赞21次，收藏22次。MongoDB是一种流行的开源文档数据库，基于分布式文件存储的数据库；是一个介于关系数据库和非关系数据库之间的产品，它属于NoSQL数据库的一种，由C++语言编写；MySQL，它不遵循传统的表格结构，类似json的bson格式正因如此，对于JavaScript有天然的优势；