网页制作公司武汉_深圳公司排名前50_中国十大策划公司排名_营销最好的方法

多级表头固定列

代码示例-不能直接运行，仅供参考

<el-table ref="table" class="table":data="list"style="width: 100%":header-cell-style="headerCellStyle"v-loading="dataLoading":span-method="spanMethod"><el-table-column v-for="(item, index) in tableHeader" :label="item.name" :key="index" :fixed="item.fixed":min-width="item.width"><el-table-column v-for="(head,j) in item.header" :label="head.label" :key="j+'ii'":fixed="head.fixed":prop="head.id":min-width="head.minW":class-name="setClass(head.id)"></el-table-column></el-table-column>
</el-table>需要在修改样式-避免固定列数据空白情况
<style lang="less" scoped>
.table {/deep/.el-table__cell.is-hidden>*{//多级表头固定列-样式修改visibility: visible;}
}
</style>

合并单元格

如图，下列方法实现的是图中的合并单元格的方式方法

function spanMethod({ row, column, rowIndex, columnIndex }) {let arr = [0, 1, 2, 4, 12, 13, 14, 15, 16, 17,18,19,20,21];//需要合并的列let spArr = [5, 22, 23, 24, 25, 26, 27];//需要合并的列if (arr.indexOf(columnIndex)>-1) {if (row.rowspan) {return {rowspan: row.rowspan,//合并多少行数据colspan: 1};} else {return {rowspan: 0,colspan: 0};}}else if (spArr.indexOf(columnIndex) > -1) {if (row.spRowspan) {return {rowspan: row.spRowspan,colspan: 1};} else {if (!row.mcId) {//避免不合并的行，缺少数据，导致没有边框return {rowspan: 1,colspan: 1}; } else {return {rowspan: 0,colspan: 0}; }}}},