当前位置：首页 > news >正文

el-table 纵向横向多级表头

news 2025/7/15 6:04:36

<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"
}
]