<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 : 0
return {
rowspan: _row,
colspan: _col,
}
}
},
/**合并表格的第一列，处理表格数据 */
flitterDatas(arr) {
let spanOneArr = []
let concatOne = 0
arr.forEach((item, index) => {
console.log(item, index)
if (index === 0) {
spanOneArr.push(1)
} else {
//注意这里的data是表格绑定的字段，根据自己的需求来改
if (item.colName1 === arr[index - 1].colName1) {
//第一列需合并相同内容的判断条件
spanOneArr[concatOne] += 1
spanOneArr.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" }