element-ui表格组件el-table切换视图或左右滑动时内容偏移的
问题
记录下这个问题，
⽤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">
</template>
那么在上⾯的代码中切换 loginType 将不会清除⽤户已经输⼊的内容。因为两个模板使⽤了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。
这样也不总是符合实际需求，所以 Vue 为你提供了⼀种⽅式来表达“这两个元素是完全独⽴的，不要复⽤它们”。只需添加⼀个具有唯⼀值的 key attribute 即可：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
element表格横向滚动条
<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小时内删除。