element ui中table动态列切换时,表格样式变形

Posted xiaojitui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;
      }
    }

  

以上是关于element ui中table动态列切换时,表格样式变形的主要内容,如果未能解决你的问题,请参考以下文章

element-ui表格组件table实现列的动态显示与隐藏

element-UI table动态增加列,动态增加行,动态合并行。选择编辑表头行数据

使用element中el-table动态增减表头列的时候出现抖动闪动的问题

vue动态控制表格列的显隐(element-ui)

element-ui 中的table的列隐藏问题

解决element-ui切换tab后,table中fixed的字段底部出现横条的问题