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

现象：定义多个头部和多个数据体，可以自由切换不同的头部和相应的数据体，但是切换过程表格会变形。

解决办法：table增加索引，切换头部和数据时，修改为不同的索引，即可解决

重点：表格标签上的  key="toggleIndex"   ,和表头切换时toggleIndex值改变

代码示例：

v-if="dialogvisible"

:data="devList | datafilter(getdeviceId,system,sensorType)"

:key="toggleIndex"

border

stripe

style="width: 100%"

height="450px"

@row-dblclick="selectDevice"

>

v-if="scope.row.x && scope.row.y"

type="primary"

plain

size="mini"

@click="selectDevice(scope.row)"

>删除

v-for="col in cols"

:key="col.prop"

:prop="col.prop"

:label="col.label"

:width="col.width"

:formatter="renderContent"

>

表头和数据切换代码：

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;

}

}

原文：https://www.cnblogs.com/xiaojitui/p/13334656.html