vue+elementui实现表格多级表头效果

本文实例为大家分享了vue+elementui实现表格多级表头的具体代码，供大家参考，具体内容如下

table组件

<template>
  <div class="tableCon" id="tableCon">
    <el-table
    :data="dataSource"
    :height="tableHeight"
    v-loading="loading"
    show-overflow-tooltip
    ref="multipleTable"
    class="multipleTable"
    @selection-change="selectionCchange"
    :key="key">
      <!-- 表格多选框 -->
      <el-table-column
        v-if="selectShow"
        type="selection"
        align="center"
        >
      </el-table-column>
      <!-- 表格单选框 -->
      <el-table-column
        v-if="radioShow && !selectShow">
        <template slot-scope="scope">
          <el-radio v-model="radioVal" @change.native="getRow(scope.row)"></el-radio>
        </template>
      </el-table-column>
      <!-- 序号-自定义序号列 -->
      <el-table-column
        v-if="indexShow"
        type="index"
        align="center"
        label="序号"
        fixed="left"
        :width="indexWidth">
          <template slot-scope="scope">
            <span>{{(page - 1) * size + scope.$index + 1}}</span>
          </template>
      </el-table-column>
      <!-- 表格数据列 -->
      <el-table-column
        align="center"
        v-for="(cloumn,index) in tableCloumns"
        :key="index"
        :label="cloumn.title"
        :prop="cloumn.prop"
        :show-overflow-tooltip="cloumn.tooltipDisplay">
        <!-- 表格枚举 -->
        <template slot-scope="scope">
          <span v-if="cloumn.prop==='status'">{{scope.row.status==='1'?'是':'否'}}</span>
          <span v-else>{{ scope.row[cloumn.prop]}}</span>
        </template>
        <!-- 二级表头 -->
        <template  v-for="(columnChildren,i) in cloumn.children">
          <el-table-column
            :key="i"
            :label="columnChildren.title"
            :prop="columnChildren.prop"
            :show-overflow-tooltip="columnChildren.tooltipDisplay"
            align="center">
            <template slot-scope="scope">
              <!-- 二级表头枚举 -->
              <span v-if="columnChildren.prop==='exit'">{{scope.row.exit==='1'?'是':'否'}}</span>
              <span v-else>{{scope.row[columnChildren.prop] || '--'}}</span>
            </template>
          </el-table-column>
        </template>
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column
        v-if="tableOperaDisplay"
        :width="tableOperaWidth"
        label="操作"
        align="center"
        fixed="right">
        <template slot-scope="scope">
          <span
            class="font-small font-color-light operationSpan"
            v-if="detailOperaDisplay"
            @click="detailOperaHandle(scope.row)"
            >{{ tableOperationText1 }}
            </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  props:{
    dataSource:{//表格数据
      type:Array,
      default: () => ([])
    },
    loading:{
      type:Boolean,
      default:false
    },
    selectShow:{//表格多选框
      type:Boolean,
      default:false
    },
    radioShow:{//表格单选框
      type:Boolean,
      default:false
    },
    indexShow:{//序号列
      type:Boolean,
      default:false
    },
    page:{
      type:Number,
      default:1
    },
     size:{
      type:Number,
      default:10
    },
    indexWidth:{//序号列宽度
      type:String,
      default:'100'
    },
    tableCloumns:{//表格数据列
      type:Array,
      default: () => ([])
    },
    tableOperaDisplay:{//表格操作列
      type:Boolean,
      default:false
    },
    detailOperaDisplay:{//操作列详情按钮
      type:Boolean,
      default:false
    },
    tableOperationText1:{
      type:String,
      default:'详情'
    }

  },
  mounted(){

  },
  data (){
    return {
      key:moment().format('YYYY-MM-DD HH:mm:ss'),
      tableHeight:'100%',
      radioVal:''
    }
  },
  methods: {
    detailOperaHandle (rowVal){
      // console.log(rowVal)
      this.$emit('detailOperaHandle',rowVal)
    },
    // 表格多选框事件
    selectionCchange (selectValArr){
      // console.log(selectValArr)
      this.$emit('selectValArr',selectValArr)

    },
    getRow (selectRowObj){
      console.log(selectRowObj)
      this.$emit('getRow',selectRowObj)
    }

  }

}
</script>
<style lang="scss" scoped>
#tableCon{
  height: 100%;
  .multipleTable{
    width: 100%;
    height: 100%;
    overflow: auto;
  }
}
</style>

在需要的页面引入

<template>
  <div id="componentInfo">
    <div class="tableCon">
      <div class="tableArea">
        <tableModule
        :dataSource="tableDatas"
        :tableCloumns="cloumns"
        :loading="false"
        :indexShow="true"></tableModule>
      </div>
    </div>
  </div>
</template>
<script>
import tableModule from '@/components/public-tables'

export default {
  components:{
    tableModule
  },
  props:{

  },
  data (){
    return {
      tableDatas:[
        {name:'小花',sex:'女',age:'19',status:'1',school1:'1',school2:'2',exit:'1'},
        {name:'小朵',sex:'女',age:'19',status:'0',school1:'1',school2:'2',exit:'0'},
        {name:'小花朵',sex:'女',age:'19',status:'1',school1:'1',school2:'2',exit:'1'}],
      cloumns:[
        {
          title:'姓名',
          prop:'name'
        },
        {
          prop:'sex',
          title:'性别'
        },
        {
          prop:'age',
          title:'年龄'
        },
        {
          prop:'status',
          title:'是否在线'
        },
        {
          prop:'school',
          title:'学校',
          children:[
            {
              prop:'school1',
              title:'学校1'
            },
            {
              prop:'school2',
              title:'学校2'
            },
            {
              prop:'exit',
              title:'存在'
            }
          ]
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
#componentInfo{
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 10px;
  .tableCon{
    width: 100%;
    height: 100%;
    .tableArea{
      width: 100%;
      height: 100%;
    }
  }
}
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。