vue使用el-table左边固定横向列表根据接口返回渲染，页面样式错乱问题，以及table表格铺满

这也是最近开发遇到的问题简单的记录一下，我们一起xx

啥也不说直接步入正题。

这是官方的

 上面红色框框  就是设置的固定位置，可以直接用默认左边  当然也可以自定义 fixed="right" 这里就使用的默认。

但是我们的数据结构是左边第一列是固定的，其他列都是根据后端返回的数据来进行展示。

这是没改变的

<template>
    <div>
           <el-table
          :data="tableData"
          border
          style="width: 100%"
          class="custom-table"
          ref="tableRefs"
        >
          <el-table-column
            prop="orgName"
            label="本期，上期数据"
            show-overflow-tooltip
            align="left"
            fixed
            width="200"
          ></el-table-column>
          <el-table-column
            v-for="(column, index) in dataLabel"
            :key="index"
            align="right"
            :label="column.indexName"
            :width="columnWidths"
            min-width="245"
          >
            <!-- 自定义表头 -->
            <template slot="header" slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="column.indexName" placement="top">
                <div
                  style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;"
                >
                  <span>{{ column.indexName }}</span>
                </div>
              </el-tooltip>
              <span v-else>{{ column.indexName }}</span>
            </template>
            <!-- 内容 -->
            <template slot-scope="scope">
              <div>
                <div v-if="scope.row[column.valueId]" class="bics_sd" :style="getCellStyle(scope.row[column.modifyId])" @click="clickTager">{{scope.row[column.valueId]}}</div> <!-- 这里要注意写法 -->
              </div>
            </template>
          </el-table-column>
        </el-table>
    </div>
</template>

附上效果图：

页面的样式直接就变得非常混乱。

接下来就要注意了，重点。

    findDataByParam() {//这里是请求的接口数据在这里面进行更改
      findDataByParam(this.objtbl.id).then(res => {
        if (res.code === 0) {
          console.log(res);
            this.tableData = res.data.list;
            this.dataLabel = res.data.title;
            //我们通过绑定ref属性来使用这个doLayout方法。
            this.$nextTick(() => {
               this.$refs['tableRefs'].doLayout();
             });
            //这个是防止只有一条数据的时候页面没有铺满
            this.calculateColumnWidth();
            
        } else {
          this.$Notice.error({
            title: res.msg,
            desc: ""
          });
        }
      });
    },
    //当接口返回一条数据时表格也能撑满
    calculateColumnWidth() {
      const totalWidth = window.innerWidth - 444; // 减去固定列的宽度从左向开始
      const columnCount = this.dataLabel.length;
      const width = Math.max(totalWidth / columnCount, 230); //这里自行可以调整
      this.columnWidths = width;
    },

 直接看效果：

 OK完美解决。