Project scenario:
During the front-end development process, we often encounter various table development scenarios. Sometimes some tables are relatively simple and some are more complex (as shown in the simple example below, there are merged items and multi-level headers). Elementui's el-table control It can also support the construction of complex tables. This article will guide you how to quickly develop complex tables~~~
Problem description and solution
1. Multi-level header
When the data structure is complex, multi-level headers can be used to show the hierarchical relationship of the data.
You only need to nest el-table-column inside el-table-column to achieve multi-level headers.
<template>
<div class="tableWrap">
<el-table
id="resultTableProject"
:data="tableData"
border
v-loading="loading"
element-loading-text="数据查询中"
:span-method="spanMethod"
height="620"
size='small'
>
<el-table-column
label="项目编号"
prop="id"
wdth="160"
align="center"
/>
<el-table-column
label="项目名称"
prop="casename"
align="center"
/>
<el-table-column
label="部门"
prop="bm"
align="center"
/>
<el-table-column
label="部门人员(产值)"
align="center"
>
<el-table-column
v-for="(item, index) in userData"
:key="index"
:label="item.name"
:prop="item.name + 'cz'"
width="200"
align="center"
/>
</el-table-column>
</el-table>
</div>
</template>
<script setup>
import { ref, onMounted,onBeforeMount, watch, reactive ,toRefs,toRaw,shallowRef} from "vue";
let tableData=ref([
{ id:202112312,casename:'小家电项目',bm:"制造一队",'张三cz':100,},
{ id:202112342,casename:'小家电项目',bm:"制造二队",'李四cz':200,},
{ id:202112343,casename:'电视机',bm:"制造三队",'王五cz':300},
{ id:202112344,casename:'电视机',bm:"制造三队",'王五cz':300,},
{ id:202112345,casename:'空调项目',bm:"制造四队",'孙七cz':300},
{ id:202112346,casename:'冰箱项目',bm:"制造四队",'孙七cz':300},
])
let userData=ref([
{
name:'张三',
},
{
name:'李四',
},
{
name:'王五',
},
{
name:'孙七',
}
])
</script>2. Merge rows or columns
Merging rows or columns can be achieved by tablepassing in the method. The parameter of the method is an object, which contains four attributes: the current row , the current column , the current row number , and the current column number . This function can return an array containing two elements, the first element represents , and the second element represents . It is also possible to return an object with the key names and .span-methodrowcolumnrowIndexcolumnIndexrowspancolspanrowspancolspan
<template>
<div class="tableWrap">
<el-table
id="resultTableProject"
:data="tableData"
border
v-loading="loading"
element-loading-text="数据查询中"
:span-method="spanMethod"
height="620"
size='small'
>
<el-table-column
label="项目编号"
prop="id"
wdth="160"
align="center"
/>
<el-table-column
label="项目名称"
prop="casename"
align="center"
/>
<el-table-column
label="部门"
prop="bm"
align="center"
/>
<el-table-column
label="部门人员(产值)"
align="center"
>
<el-table-column
v-for="(item, index) in userData"
:key="index"
:label="item.name"
:prop="item.name + 'cz'"
width="200"
align="center"
/>
</el-table-column>
</el-table>
</div>
</template>
<script setup>
import { ref, onMounted,onBeforeMount, watch, reactive ,toRefs,toRaw,shallowRef} from "vue";
let tableData=ref([
{ id:202112312,casename:'小家电项目',bm:"制造一队",'张三cz':100,},
{ id:202112342,casename:'小家电项目',bm:"制造二队",'李四cz':200,},
{ id:202112343,casename:'电视机',bm:"制造三队",'王五cz':300},
{ id:202112344,casename:'电视机',bm:"制造三队",'王五cz':300,},
{ id:202112345,casename:'空调项目',bm:"制造四队",'孙七cz':300},
{ id:202112346,casename:'冰箱项目',bm:"制造四队",'孙七cz':300},
])
let userData=ref([
{
name:'张三',
},
{
name:'李四',
},
{
name:'王五',
},
{
name:'孙七',
}
])
const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
// 如果当前列不是组织机构列，则返回 { rowspan: 1, colspan: 1 }，表示该单元格不需要合并
// if (columnIndex !== 0 && columnIndex !== 1&& columnIndex !== 2 &&columnIndex!==9&&columnIndex!==10) {
// return { rowspan: 1, colspan: 1 };
// }
if (columnIndex !== 0 && columnIndex !== 1) {
return { rowspan: 1, colspan: 1 };
}
// 如果当前行是该组织机构的第一行，则计算该组织机构的行数，并返回 { rowspan, colspan: 1 }，表示需要合并的行数为 rowspan
if (
rowIndex === 0 ||
row.casename !== tableData.value[rowIndex - 1].casename
) {
const rowCount = tableData.value.filter(
(i) => i.casename === row.casename
).length;
return { rowspan: rowCount, colspan: 1 };
}
// 否则返回 { rowspan: 0, colspan: 0 }，表示该单元格已被上方单元格合并
return { rowspan: 0, colspan: 0 };
};
</script>
<style lang="less" scoped>
.tableQualityProject {
height: 100vh;
width: 100%;
overflow: auto;
background-image: #f2f2f2;
h1 {}
}
.tableWrap {
padding: 0 20px;
// width: 100%;
// margin: 0 auto;
/deep/ .el-table__header th {
background-color: #409eff!important ; /* 设置表头颜色 */
color: #fff; /* 设置表头文字颜色 */
// background-color:#FAFAFA;
// color:#252525;
border:1px solid f5f5f5;
}
/deep/ .el-table .cell {
// font-weight: 700;
font-size: 16px;
padding: 0;
}
.gzlWrap {
// border-bottom:1px solid #dfdfdf;
&:last-child {
border-bottom: none;
}
span {
display: inline-block;
padding: 5px 0;
}
.key {
width: 60%;
}
.value {
width: 40%;
}
}
.selfTableHead {
display: flex;
span {
display: inline-block;
width: 60px;
}
}
}
</style>3. Customize header color
The simplest: just modify the header style
.tableWrap {
padding: 0 20px;
// width: 100%;
// margin: 0 auto;
/deep/ .el-table__header th {
background-color: #409eff!important ; /* 设置表头颜色 */
color: #fff; /* 设置表头文字颜色 */
// background-color:#FAFAFA;
// color:#252525;
border:1px solid f5f5f5;
}
/deep/ .el-table .cell {
// font-weight: 700;
font-size: 16px;
padding: 0;
}
.gzlWrap {
// border-bottom:1px solid #dfdfdf;
&:last-child {
border-bottom: none;
}
span {
display: inline-block;
padding: 5px 0;
}
.key {
width: 60%;
}
.value {
width: 40%;
}
}
.selfTableHead {
display: flex;
span {
display: inline-block;
width: 60px;
}
}
}