element 多级表头封装

最新推荐文章于 2024-07-23 21:45:00 发布

vue练习时长两年半的个人实习生

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量635

点赞数

分类专栏： elementUI 文章标签： vue.js 前端 javascript

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

版权

elementUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

父组件

<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>