element-ui表格组件el-table切换不同表格时或左右滑动时内容偏移的问题
问题：
在项⽬的过程中，⼀个页⾯通过按钮切换不同的列表的时候发现有些列不在同⼀⾏了，会显得很拉垮，于是⽹上了很多解决办法，最初想法也是应该是上⼀次加载的表格对下⼀次有影响…
那具体是怎么解决的呢？
解决：
因为v-if 控制el-table-column 的渲染，则在v-if 切换的过程中造成表格数据的偏移， Vue 为你提供了⼀种⽅式来表达“这两个元素是完全独⽴的，不要复⽤它们”。只需添加⼀个具有唯⼀值的 key attribute 即可：
#直接在拉垮的地⽅添加⼀个key
<el-table-column key="0" label="操作" min-width="20%" fixed="right" align="center">
...
<el-table-column key="1" label="操作" min-width="20%" fixed="right" align="center">
...
<el-table-column key="2" label="操作" min-width="20%" fixed="right" align="center">
解决灵感来源：.
原⽂内容：
记录下这个问题，
⽤el-table的时候假如 通过v-if 控制el-table-column 的渲染，则在v-if 切换的过程中造成表格数据的偏移，这个不是element组件的问题，⽽是v-if本⾝的特性：
.
Vue 会尽可能⾼效地渲染元素，通常会复⽤已有元素⽽不是从头开始渲染。这么做除了使 Vue 变得⾮常快之外，还有其它⼀些好处。例如，如果你允许⽤户在不同的登录⽅式之间切换：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
element表格横向滚动条
</template>
那么在上⾯的代码中切换 loginType 将不会清除⽤户已经输⼊的内容。因为两个模板使⽤了相同的元素， 不会被替换掉——仅仅是替换了它的 placeholder。
这样也不总是符合实际需求，所以 Vue 为你提供了⼀种⽅式来表达“这两个元素是完全独⽴的，不要复⽤它们”。只需添加⼀个具有唯⼀值的 key attribute 即可：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
对此，通过v-if 控制el-table-column 的渲染 的⽅法就是得加key：（⽆法通过v-show控制显隐）
<el-table-column
label="序列号"
key="serialNo"
v-if="selectCode === 0"
width="100"
>
<template slot-scope="{ row }">{{        row.serialNo ||'- -'
}}</template>
</el-table-column>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。