Element表格固定第一列和第一行，并通过属性名动态渲染数据

参考： 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();
          });