element 一个页面两个table显隐相互影响

秒速五厘米 2022-09-02 00:43 228阅读 0赞

在用element UI 做项目时，发现如果一个页面有两个table时，并且这两个table会有一个显示一个隐藏的功能（`v-if`，`v-else`）时，会出现表格错落的情况，两个table会相互影响。经过查询[VUE官网][VUE]发现：

>   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 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素， 不会被替换掉——仅仅是替换了它的 placeholder。  
>   这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可。

所以我们可以给`el-table`元素加上`key`值标识，不许复用。

<el-table v-if="tabIndex==1" key="one" v-loading="loading" :data="dataList">
    	<el-table-column label="名称" align="center" key="name" prop="name" :show-overflow-tooltip="true" width="100"/>
    </el-table>

表格中的列也有这种情况，相同的我们也是给`el-table-column`元素加上`key`标识，不许复用。

<el-table v-if="tabIndex==1" key="one" v-loading="loading" :data="dataList">
    	<el-table-column label="联系人照片" align="center" key="linkPhoto" prop="linkPhoto" :show-overflow-tooltip="true" width="100" v-if="shoPhoto" />
    	<el-table-column label="联系人姓名" align="center" key="linkName" prop="linkName" :show-overflow-tooltip="true" width="100" v-else />
    </el-table>

[VUE]: https://cn.vuejs.org/v2/guide/conditional.html