标签：mini system 视频 v-for prim click style color orm
现象：定义多个头部和多个数据体，可以自由切换不同的头部和相应的数据体，但是切换过程表格会变形。
解决办法：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;
}
}
标签：mini system 视频 v-for prim click style color orm
原文地址：https://www.cnblogs.com/xiaojitui/p/13334656.html
