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里面的各个值。