element ui中table動態列切換時，表格樣式變形

現象：定義多個頭部和多個數據體，可以自由切換不同的頭部和相應的數據體，但是切換過程表格會變形。

解決辦法：table增加索引，切換頭部和數據時，修改為不同的索引，即可解決

重點：表格標簽上的  key="toggleIndex"   ,和表頭切換時toggleIndex值改變

代碼示例：

<el-table
      v-if="dialogvisible"
      :data="devList | datafilter(getdeviceId,system,sensorType)"
      :key="toggleIndex"
      border
      stripe
      style="width: 100%"
      height="450px"
      @row-dblclick="selectDevice"
    >
      <el-table-column type="index" fixed align="center" label="序號" width="50"></el-table-column>
      <el-table-column align="center" label="操作" :width="system==='121'?150:90">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.x && scope.row.y"
            type="primary"
            plain
            size="mini"
            @click="selectDevice(scope.row)"
          >刪除</el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-for="col in cols"
        :key="col.prop"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
        :formatter="renderContent"
      ></el-table-column>
    </el-table>

　　

表頭和數據切換代碼：

binData(_system) {
      if (_system === "140") {
        // 每次需要切換時需修改表格的索引值，解決表格動態加載數據閃的問題
        this.toggleIndex = 0;
        //人員定位系統
        this.cols = this.personnelCol;
        this.devList = this.deviceList;
      } else if (_system === "120") {
        // 每次需要切換時需修改表格的索引值，解決表格動態加載數據閃的問題
        this.toggleIndex = 1;
        //安全監測系統
        this.cols = this.safeCol;
        this.devList = this.safeList;
      } else if (_system === "121") {
        // 每次需要切換時需修改表格的索引值，解決表格動態加載數據閃的問題
        this.toggleIndex = 2;
        //工業視頻系統
        this.cols = this.videoCol;
        this.devList = this.videoList;
      }
    }