vue+elementui实现表格多级表头效果
作者：不要停止努力呦
这篇文章主要为大家详细介绍了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。