elementui中 el-table表格表头以及内容渲染(横向纵向渲染)以及固定列fixed定位位置错乱表格偏移问题

el-table横向纵向渲染

横向纵向渲染需要两类数组，一类渲染表头，另外一类需要渲染内容，表头数组每一个对象需要塞入两个值 一个为表头渲染的内容即绑定label 另外一个为该纵列值所在字段名即绑定prop

<el-table
      ref="refreshTable"
      v-loading="loading"
      :data="listData"
      :header-cell-style="{ background: '#007F69', color: '#fff' }"
      highlight-current-row
    >
      <el-table-column
        fixed
        width="170px"
        label="测点"
        align="center"
        prop="测站名称"
      />
      <el-table-column label="降雨日期(mm)" align="center">
        <template v-for="(item, index) in dataList">
          <el-table-column
            align="center"
            :prop="item.name"
            :label="item.house"
            :key="index"
            v-if="item.name != 'id'"
          ></el-table-column>
        </template>
      </el-table-column>
</el-table>

dataList:[
        {
          name: "2021-12-01",
          house: "01",
        },
        {
          name: "2021-12-02",
          house: "02",
        },
        {
          name: "2021-12-03",
          house: "03",
        }
      ],
listData:[
        {
          测站名称:"1#站点"
          2021-12-01:4266.7,
          2021-12-02:3574.9,
          2021-12-03:4313.3
        },
        {
          测站名称:"2#站点"
          2021-12-13:4266.7,
          2021-12-14:3574.9,
          2021-12-15:4313.3
        },
        {
          测站名称:"3#站点"
          2021-12-01:4266.7,
          2021-12-02:3574.9,
          2021-12-03:4313.3
        }
      ]

页面错乱问题由于数据不断刷新，未及时渲染dom所导致，故在两组数组对象接受完毕之后通过ref绑定及时刷新即可

this.$nextTick(() => {
            this.$refs.refreshTable.doLayout();
          });