el-table 纵向 横向 多级表头

<el-table :data="tableData" class="diaTable":span-method="handleSpanMethod"border:header-cell-style="{background:'#292929',color:'#fff'}"><!-- 纵向表头 --><el-table-column label="纵向表头" width="100" ><!-- <el-table-column label="标准" width="140" prop="name"> --><template slot-scope="scope">{{ scope.row.colName1 }}</template><!-- </el-table-column> --></el-table-column><el-table-column label="纵向表头" width="200"  prop='colName2'><!-- <el-table-column label="标准" width="140" prop="name"> --><!-- <template slot-scope="scope">{{ scope.row.colName2 }} --><!-- {{ scope.row.verticalHeader3 }} --><!-- </template> --><!-- </el-table-column> --></el-table-column><!-- 横向表头和数据列 --><!-- <el-table-column label="横向表头1"> --><el-table-column prop="value1" label="泰康薪意保货币市场基金"></el-table-column><el-table-column prop="value2" label="泰康现金管家货币市场基金"></el-table-column><!-- </el-table-column> --><!-- <el-table-column label="横向表头2"> --><el-table-column prop="value3" label="监管规定"></el-table-column><!-- <el-table-column prop="value4" label="值4"></el-table-column> --><!-- </el-table-column> --></el-table>tableData: [{colName1: '关键指标',colName2: '基金净值(万)',value1: 'A1',value2: 'B1',value3: 'C1',},{colName1: '持有人结构',colName2: '机构投资这占比',value1: 'A2',value2: 'B2',value3: 'C2',},{colName1: '持有人结构',colName2: '前十大持有人占比',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '现金类',colName2: '现金类资产',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '现金类',colName2: '5日内到期金融工具',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '现金类',colName2: '合计',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '现金比例类',colName2: '现金类资产比例',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '现金比例类',colName2: '5日内到期金融工具比例',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '现金比例类',colName2: '合计比例',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '需要补的金额',colName2: '需要补的现金金额(万)',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '需要补的金额',colName2: '需要补的现金+5日年内金额(万)',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '剩余天数',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '偏离度',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '市值类加权久期',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '正回购比例',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '存款占比',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '逆回购占比',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '市值类占比',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '同业存单占比',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '流动性受限资产占比',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '预警类',colName2: '是否对1%以上赎回收取强制赎回费',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},],/////弹框合并单元格handleSpanMethod({ row, column, rowIndex, columnIndex }){// 判断哪一列 如果需要处理多了 使用 || 进行处理即可if (columnIndex === 0) {const _row = this.flitterDatas(this.tableData).one[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col,}}},/**合并表格的第一列，处理表格数据 */flitterDatas(arr) {let spanOneArr = []let concatOne = 0arr.forEach((item, index) => {console.log(item, index)if (index === 0) {spanOneArr.push(1)} else {//注意这里的data是表格绑定的字段，根据自己的需求来改if (item.colName1 === arr[index - 1].colName1) {//第一列需合并相同内容的判断条件spanOneArr[concatOne] += 1spanOneArr.push(0)} else {spanOneArr.push(1)concatOne = index}}})return {one: spanOneArr,}},////* 自定义样式，使纵向表头固定在左侧 */.el-table th.el-table-column--selection,.el-table th.el-table-column--expand,.el-table th:first-child {position: sticky;left: 0;/**  background-color: #f5f7fa; */background-color: #292929;z-index: 1;}.el-table th.el-table-column--selection,.el-table th.el-table-column--expand,.el-table th:first-child::after {content: "纵向表头";transform: rotate(-90deg);position: absolute;left: 25px;top: 20px;white-space: nowrap;width: 30px;}

后端返回数据

[
    {
        "jjmc": "泰康薪意保货币市场基金",   //基金名称
        "netValue": "1931271.074451",   //基金净值（万）
        "tzjgzb": "0.41%",   //机构投资者占比
        "qsdcyrzb": "0.6052%",   //前十大持有人占比
        "xjlzc": "290919.1215",    //现金类资产
        "dqjrgj": "1159500.87975",   //5日内到期金融工具
        "xjlzcFive": "1450420.00125",   //合计
        "xjlzcbl": "9.2889%",   //现金类资产
        "dqjrgjbl": "4.0025%",   //5日内到期金融工具
        "xjlzcblFive": "13.2915%",   //合计比例
        "xybxjje": "1157534.18433825",   //需要补的现金金额（万）
        "xybxjjeFive": "1446486.610425",   //合计比例（万）
        "syts": "100.91296%",    //剩余天数
        "pld": "0.0334%",   //偏离度
        "szljqjq": "55.353543",   //市值类加权久期
        "zhgbl": "4.24%",   //正回购比例
        "ckzb": "44.79%",   //存款占比
        "nhgzb": "0%",   //逆回购占比
        "szlzb": "46.58%",   //市值类占比
        "tycdzn": "31.29%",   //同业存单占比
        "ldxsxzczb": "0%",   //流动性受限资产占比
        "qzshf": "0"   //是否对1%以上赎回收取强制赎回费
    },
    {
        "jjmc": "泰康现金管家货币市场基金",
        "netValue": "1768859.846029",
        "tzjgzb": "34.08%",
        "qsdcyrzb": "10.9349%",
        "xjlzc": "863277.16688",
        "dqjrgj": "1586303.216896",
        "xjlzcFive": "2449580.383776",
        "xjlzcbl": "3.0503%",
        "dqjrgjbl": "5.605%",
        "xjlzcblFive": "8.6552%",
        "xybxjje": "551810.7099432",
        "xybxjjeFive": "380595.369872",
        "syts": "106.9356%",
        "pld": "0.0376%",
        "szljqjq": "53.494717",
        "zhgbl": "8.54%",
        "ckzb": "52.29%",
        "nhgzb": "6.85%",
        "szlzb": "46.18%",
        "tycdzn": "28.34%",
        "ldxsxzczb": "5.65%",
        "qzshf": "0"
    }
]