
效果图
<el-table
v-if="wideTable"
v-loading="loading"
:data="checkLogList"
:render-header="labelHead"
:border="true"
>
<el-table-column
:label="item"
v-for="(item, index) in header"
:key="item"
align="center"
>
<template slot-scope="scope">
<span
v-for="(item2, index2) in scope.row.countd"
v-if="index2 == index"
>
{{ scope.row.countd[index2] }}
</span>
<span
v-for="(item2, index2) in scope.row.countp"
v-if="index2 == index"
>
{{ scope.row.countp[index2] }}
</span>
<span
v-for="(item2, index2) in scope.row.principalPrice"
v-if="index2 == index"
>
{{ scope.row.principalPrice[index2] }}
</span>
</template>
</el-table-column>
</el-table>
/** 查询列表 */
getList(data) {
this.loading = true;
this.wideTable = true;
this.header = [];
this.checkLogList = [
// { header: ["", "第一季度", "第二季度", "第三季度", "第四季度"] },
{ countd: ["户数", "1", "2", "3", "4"] },
{ countp: ["包数", "5", "6", "7", "8"] },
{ principalPrice: ["本金金额", "9", "10", "11", "12"] },
];
this.header = ["", "第一季度", "第二季度", "第三季度", "第四季度"];
this.loading = false;
},
labelHead(h, { column, index }) {
//动态表头渲染
//let l = column.label.length;
//let f = 12; //每个字大小,其实是每个字的比例值,大概会比字体大小打差不多大
//column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素,这里minWidth只是一个比例值,不是真正的长度
//然后将列标题放在一个div块中,注意块的宽度一定要100%,否则表格显示不完全
return h("span", { class: "table-head", style: { width: "100%" } }, [
column.label,
]);
},
网友评论