参考: Element表格固定第一列和第一行,并通过属性名动态渲染数据
Element表格固定第一列和第一行,并通过属性名动态渲染数据
<el-table :data="sentimentData" style="width: 680px">
<el-table-column
fixed
prop="name"
label="区域"
width="100">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column v-for="item in areaName" :key="item.index"
:prop="item.nano"
:label="item.name"
width="100">
<!-- 最重要的 scope.row[item.nano] 没有 [] 渲染不出来数据-->
<template slot-scope="scope">{{ scope.row[item.nano] }} <!-- 动态数据方式 scope.row[item.nano] -->
</template>
</el-table-column>
</el-table>
<!--sentimentData和areaName数组数据-->
areaName:[ {name:'南海诸岛', nano: 'NH'},{name:'北京市', nano: 'BJ'},{name:'天津市', nano: 'TJ'}, {name:'上海市', nano: 'SH'}, {name:'重庆市', nano: 'CQ'},
{name:'河北省', nano: 'HB'}, {name:'河南省', nano: 'HNB'}, {name:'云南省', nano: 'YN'}, {name:'辽宁省', nano: 'LN'}, {name:'黑龙江省', nano: 'HLJ'},
{name:'湖南省', nano: 'HNS'}, {name:'安徽省', nano: 'AH'}, {name:'山东省', nano: 'SD'}, {name:'新疆省', nano: 'XJ'}, {name:'江苏省', nano: 'JS'},
{name:'浙江省', nano: 'ZJ'}, {name:'江西省', nano: 'JX'}, {name:'湖北省', nano: 'HB'}, {name:'广西省', nano: 'GX'}, {name:'甘肃省', nano: 'GS'},
{name:'山西省', nano: 'SX'}, {name:'内蒙古省', nano: 'NMG'}, {name:'陕西省', nano: 'SX'}, {name:'吉林省', nano: 'JL'}, {name:'福建省', nano: 'FJ'},
{name:'贵州省', nano: 'GZ'}, {name:'广东省', nano: 'GD'}, {name:'青海省', nano: 'QH'}, {name:'西藏省', nano: 'XZ'}, {name:'四川省', nano: 'SC'},
{name:'宁夏省', nano: 'NX'}, {name:'海南省', nano: 'HN'}, {name:'台湾省', nano: 'TW'}, {name:'香港', nano: 'XG'}, {name:'澳门', nano: 'AM'}],
sentimentData: [
{ name: '全部', NH: 123, BJ: 152, TJ: 253, SH: 253, CQ: 825, HB: 248, YN: 4785, LN: 856, HLJ: 845, HNS: 965, AH: 542, SD: 856, XJ:968,
JS: 856, ZJ: 562, JX: 895, HB: 456, GX: 325, GS: 652, NMG:251, SX: 654, JL: 765,FJ: 965, FJ: 523, GZ: 745,GD: 210, QH: 120, XZ: 304, SC:175,
NX: 412, HNB: 142,TW: 325, XG: 684, AM: 4514},
{ name: '农事事件', NH: 1154, BJ: 152, TJ: 253, SH: 253, CQ: 825, HB: 248, YN: 4785, LN: 856, HLJ: 845, HNS: 965, AH: 542, SD: 856, XJ:968,
JS: 856, ZJ: 562, JX: 895, HB: 456, GX: 325, GS: 652, NMG:251, SX: 654, JL: 765,FJ: 965, FJ: 523, GZ: 745,GD: 210, QH: 120, XZ: 304, SC:175,
NX: 412, HNB: 142,TW: 325, XG: 684, AM: 4514},
{ name: '其他', NH: 1456, BJ: 152, TJ: 253, SH: 253, CQ: 825, HB: 248, YN: 4785, LN: 856, HLJ: 845, HNS: 965, AH: 542, SD: 856, XJ:968,
JS: 856, ZJ: 562, JX: 895, HB: 456, GX: 325, GS: 652, NMG:251, SX: 654, JL: 765,FJ: 965, FJ: 523, GZ: 745,GD: 210, QH: 120, XZ: 304, SC:175,
NX: 412, HNB: 142,TW: 325, XG: 684, AM: 4514}
]
渲染结果:
滚动条可拉动,第一列为固定不动,nano为简称对应sentimentData里面的各个值。
代码:
<el-table
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(10, 35, 72, 0.85)"
:data="improveTableData"
style="width: 100%"
size="mini"
height="100%"
ref="improveRankTable"
>
<el-table-column
fixed
prop="name"
:label="
tableData && tableData.length > 0
? tableData[0].sstationName
: selectedCityOrCountyObj.name
"
align="center"
>
<template slot-scope="scope">
{{ scope.row.name }}
</template>
</el-table-column>
<el-table-column
v-for="item in improveRowName"
:key="item.value"
:label="item.name"
align="center"
>
<template slot-scope="scope">
{{ scope.row[item.value] }}
</template>
</el-table-column>
</el-table>
this.improveRowName = [
{
name: "当期",
value: "paramC",
},
{
name: "上年同期",
value: "paramY",
},
{
name: "增加%",
value: "paramYad",
},
{
name: "改善排名",
value: "paramPM",
},
];
this.improveTableData = [];
getQueryRanking({
alternativeBack: "0",
beginTime: this.queryParams.dataTime[0],
endTime: this.queryParams.dataTime[1],
bzType: "newbz",
choiceType: "isXJ",
dateType: "Sd",
isSCBNew: "2",
numplace: "0",
sjy: false,
tcType: "afterTC",
stationNames: this.selectedCityOrCountyObj.name,
})
.then((res) => {
this.loading = false;
if (res.code === 200) {
console.log(res, "空气质量排名-区县-二级-改善排名");
this.tableData = res.data;
if (res.data && res.data.length > 0) {
this.improveTableData = [
{
name: "综合指数",
paramC: res.data[0].atic,
paramY: res.data[0].atiy,
paramYad: res.data[0].atiyad,
paramPM: res.data[0].atipm,
},
{
name: "环境空气质量等级",
paramC: res.data[0].environmentalC,
paramY: res.data[0].environmentalY,
// paramYad: res.data[0].atiyad,
// paramPM: res.data[0].atipm,
},
{
name: "PM2.5",
paramC: res.data[0].pm25C,
paramY: res.data[0].pm25Y,
paramYad: res.data[0].pm25Yad,
paramPM: res.data[0].pm25PM,
},
{
name: "PM10",
paramC: res.data[0].pm10C,
paramY: res.data[0].pm10Y,
paramYad: res.data[0].pm10Yad,
paramPM: res.data[0].pm10PM,
},
{
name: "O3",
paramC: res.data[0].o3C,
paramY: res.data[0].o3Y,
paramYad: res.data[0].o3Yad,
paramPM: res.data[0].o3PM,
},
{
name: "NO2",
paramC: res.data[0].no2C,
paramY: res.data[0].no2Y,
paramYad: res.data[0].no2Yad,
paramPM: res.data[0].no2PM,
},
{
name: "SO2",
paramC: res.data[0].so2C,
paramY: res.data[0].so2Y,
paramYad: res.data[0].so2Yad,
paramPM: res.data[0].so2PM,
},
{
name: "CO",
paramC: res.data[0].coc,
paramY: res.data[0].coy,
paramYad: res.data[0].coyad,
paramPM: res.data[0].copm,
},
{
name: "优良率(%)",
paramC: res.data[0].bybl,
paramY: res.data[0].sntq,
paramYad: res.data[0].bysn,
paramPM: res.data[0].bysnpm,
},
{
name: "重污染天",
paramC: res.data[0].hpsc,
paramY: res.data[0].hpsy,
paramYad: res.data[0].hpsyad,
paramPM: res.data[0].hpspm,
},
];
}
}
})
.catch((error) => {
this.loading = false;
});
this.$nextTick(() => {
this.$refs.improveRankTable.doLayout();
});